1

我想将事件绑定到正文中的所有元素，但容器及其后代除外，并且无法使其正常工作。假设 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);
});

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

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

我设法实现了我想要的（这里小提琴）：

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

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

4

1 回答 1

0

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

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

它将匹配第body一个，然后是每个后代，当您过滤时，not您会忽略.myDiv它，它是孩子，但您仍然保留身体。

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

$("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.log) 选择器的结果，这样您就可以更好地了解正在发生的事情

祝你好运！

于 2013-04-09T11:45:32.957 回答