jquery - jQuery选择器:不在子div内

我希望能够使用jquery绑定body标记上的click事件，但不能在class div = noclick的子div内绑定。

<div>
    <div>you can click here</div>
    <br><br><br>
    <div class='noclick'>NO ALERT</div>
</div>

这不行

$("body:not(.noclick)").on('click', function (e) {
    alert("clicked")
});

这是一个JSFiddle

最佳答案

在您的示例中，:not() pseudo class没有执行任何操作。

jQuery选择器$("body:not(.noclick)")将选择一个没有类body的.noclick元素。在您的示例中，body元素没有.noclick类，这意味着它将被选择，并且无论如何，click事件都会冒泡到body元素，并且将触发该函数。

您可以通过检索target对象的event property（在此示例中为e.target）来访问对clicked元素的引用。

从那里，您可以使用.closest() method来确定所单击的元素是否具有类.noclick的祖先，或者当前元素是否具有.noclick的类。


.closest() method:

对于集合中的每个元素，通过测试元素本身并在DOM树中遍历其祖先，获得与选择器匹配的第一个元素。


Updated Example

$(document).on('click', function (e) {
    if (!$(e.target).closest('.noclick').length) {
        alert('Alert');
    }
});