Question

我有以下示例结构：

<div class="modHolder">
  <div id="wData">...</div>
</div>

如果点击.modHolder，我想要发生一些事情，但如果点击#wData则不会发生任何事情。

这是我尝试的内容，但#wData仍在对点击做出反应：

$(document).on('click', '.modHolder:not("#wData"), .modClose', function(e) {
...
}

任何想法为什么？

Answer 1

以下是如何操作，使用此按钮点击.modHolder：

$(document).on('click', '.modHolder, .modClose', function(e) {
    ...
});

然后添加：

$(document).on('click', '#wData', function(e) {
    e.stopPropagation();
});

这将停止clickEvent冒泡DOM树。

请在此处查看：JSFiddle

Answer 2

你的选择器错了。尝试替换

'.modHolder:not("#wData")'

带

'.modHolder div:not("#wData")'

这是一个小提琴：

http://jsfiddle.net/muywo9qp/

Answer 3

应该是：

$(document).on('click', '.modHolder', function(e) { ... });
$(document).on('click', '#wData', function(e) {
    e.stopImmediatePropagation();
});

$(document).on('click', '.modHolder', function(e) { 
  alert('Here');
});
$(document).on('click', '#wData', function(e) {
  e.stopImmediatePropagation();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="modHolder">
  <div id="wData">.....</div>
  <div class="modClose">X</div>
</div>

：not（）on click事件仍在触发

3 个答案: