Question

我想将事件绑定到正文中的所有元素但是容器及其后代并且无法使其正常工作。假设html标记是：

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

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

我首先尝试过：

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

但警报会在两个标签上触发（小提琴here）。我得到了相同的结果：

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

我设法实现了我想要的东西（小提琴here）：

$("body, body *").on("click", function(e) {
    if ($(e.target).parents(".myDiv, .myDiv *").length == 0) {
        e.stopPropagation();
        alert(e.target);
    }
});

但我不明白为什么以前的两种方式都不会产生相同的结果。

Answer 1

正在发生的事情是jQuery完全匹配你告诉他的内容，所以当你写下来时：

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

它首先匹配body，然后匹配每个后代，当您使用not进行过滤时，您遗漏了.myDiv并且它是孩子，但您仍然保持身体。

这里也是如此：

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

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

要解决这个问题，你可以这样做：

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

我建议您登录控制台（console.log）选择器的结果，这样您就可以更好地了解正在发生的事情

祝你好运！

过滤器元素与jQuery“on”方法绑定

1 个答案: