使所有内容都无法点击，但只有一个元素[重复]

Question

我正在制作弹出窗口。当它出现时，我希望一切都无法点击，但是这个弹出窗口。 这是一些糟糕的代码示例：

<div class="content-unclickable">
   <div class="popup-clickable">some info and buttons</div>
</div>

Answer 1

$('content-unclickable *').on('mousedown', function(e){
    e.preventDefault();
    e.stopPropagation();
    return false;
});

您可以返回 false 并使用 e.preventDefault(); 防止默认行为和 e.stopPropagation(); 所有项目将停止传播

Answer 2

我想你想在包含一些元素的页面上显示一个叠加层。

检查以下示例：

首先，如果您单击“页面元素”，则会弹出一个警报。 点击“打开弹出窗口”，您希望能够点击“页面元素”：

$('#open-popup').on('click', function() {
  $('#popup').show();
});
$('#page').on('click', function() {
  alert('you clicked on page!');
});
$('#popupElem').on('click', function() {
  alert('you clicked onside popup!');
});

#popup {
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background-color:rgba(0,0,0,0.5);
  z-index:100;
  display:none;
}
.popup-inner {
  position:fixed;
  width:200px;
  height:150px;
  top:50%;;
  left:50%;
  margin-top:-75px;
  margin-left:-100px;
  background-color:#ececec;
  z-index:110;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<span id="page">page element (click on me!)</span><br />
<span id="open-popup">open popup!</span>
<div id="popup">
   <div class="popup-inner">some info and buttons <b id="popupElem">click</b></div>
</div>