单击和选择器：不-不工作

Question

为什么选择器 :not - 不起作用？点击红色区域后，打开警报。为什么？

<div class='content'>

    <div style="width:200px; height:200px; background:#EEE;">

        <div id="click" style="width:100px; height:100px; background:red"></div>

    </div>

</div>

$("body:not(#click)").on("click",  function(event) {

alert(event.target.id);

});

Answer 1

您需要使用停止传播或检查点击处理程序中的条件。

您的选择器 body:not(#click) 将查找 ID 不是 click 的正文元素，在您的情况下，正文没有 ID，因此它将处理程序添加到正文元素

$("body").on("click", function (event) {
    if (!$(event.target).closest('#click').length) {
        alert(event.target.id);
    }
});

演示：Fiddle

使用停止传播

$("body").on("click", function (event) {
    alert(event.target.id);
});

$("#click").on("click", function (event) {
    event.stopPropagation()
});

演示：Fiddle

The Dangers of Stopping Event Propagation

单击和选择器：不-不工作

Click and selector :not - not working

jquery

jquery-selectors