单击.on()和:not

Question

$(document).on('click', 'body:not(.add-to)', function(e){
    //$('.tooltip').hide();
    console.log('clik');
});

使用上述方法，只要单击页面，console.log就会显示clik，即使当我单击元素.add-to时，它也会在不应该触发的情况下触发该元素。

我搞砸什么了吗？

<ul class="user-controls">
    <li>
        <a class="add-to" href="#">
            <img src="/assets/img/icons/add-feed.png" class="favicon">
            <span>Add</span>
        </a>
        <div></div>
    </li>
</ul>

Answer 1

如果选择器body:not(.add-to)不公开add-to类，则它与页面的add-to元素匹配。它不会和它的任何后代相配。

你可能在寻找：

$(document).on('click', 'body :not(.add-to)', function(e) {
    console.log('click');
});

但在这种情况下，body祖先并不是必需的，您只需编写：

$(document).on('click', ':not(.add-to)', function(e) {
    console.log('click');
});

编辑:从您发布的标记中可以看出，单击<img>或<span>元素将触发处理程序，因为这些元素中没有一个公开add-to类本身。

您可以通过将最近()应用于e.target来解决此问题。

$(document).on("click", function(e) {
    if (!$(e.target).closest(".add-to").length) {
        console.log("click");
    }
});

请注意，将:not(.add-to *)传递给on()将产生几乎相同的结果，但不完全相同:如果<a>元素有文本内容并单击内容，则该选择器不会阻止对console.log()的调用被执行。

另一方面，基于closest()的解决方案确实防止在这种情况下执行console.log()。

Answer 2

在身体之间添加一个空格以获得装饰

$(document).on('click', 'body :not(.add-to)', function(e){
    //$('.tooltip').hide();
    console.log('clik');
});

Answer 3

那里不需要身体

$(document).on('click', ':not(.add-to)', function(e){
    //$('.tooltip').hide();
    console.log('clik');
});

到目前为止，您正在告诉那个没有类.add-to的主体