使用jQuery“on”方法绑定的筛选器元素

我希望将事件绑定到主体中的所有元素，但容器及其子体除外，并且很难使其正常工作。假设html标记是：

<div class="myDiv">
    <div>
        <label>Click here (should not alert)</label>    
    </div>
</div>

 <label>Click here (should alert)</label>    

但这两个标签都会发出警报。我得到了与以下相同的结果：

$("body, body *").on("click", ":not(.myDiv)", function(e) {
    e.stopPropagation();
    alert(e.target);
});

我用小提琴实现了我想要的：

---

但是我不明白为什么前面两种方法不能产生相同的结果。

发生的是jQuery与您告诉他的完全匹配，所以当您编写时：

$("body, body *").not(".myDiv, .myDiv *").on("click", function(e) {

它将首先匹配身体，然后是每个后代，当你过滤时，你不需要。myDiv和它的childs，但你仍然保留身体

同样的情况也发生在这里：

$("body, body *").on("click", ":not(.myDiv)", function(e) {

因此，即使您的not选择器是正确的，body元素仍然会附加一个事件，这就是为什么您的最后一段代码会工作，它会在body中触发事件并询问以后要过滤什么

要解决此问题，您可以执行以下操作：

$("body *").not(".myDiv, .myDiv *").on("click", function(e) {
    e.stopPropagation();
    alert(e.target);
});

我建议您登录console。记录选择器的结果，以便更好地了解正在发生的事情

祝你好运

$("body, body *").on("click", ":not(.myDiv)", function(e) {

$("body *").not(".myDiv, .myDiv *").on("click", function(e) {
    e.stopPropagation();
    alert(e.target);
});