$(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>
如果选择器不公开类，则选择器body:not(.add-to)匹配页面元素。它不会匹配它的任何后代。<body>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>or<span>元素将触发处理程序，因为这些元素都不会暴露add-to类本身。
您可以通过将nearest()应用于e.target来解决此问题：
$(document).on("click", function(e) {
if (!$(e.target).closest(".add-to").length) {
console.log("click");
}
});
请注意，传递:not(.add-to *)到将具有几乎相同的结果，但不完全是：如果元素具有文本内容并且单击该内容，则on()该选择器不会阻止执行调用。console.log()<a>
closest()另一方面，基于 的解决方案确实会阻止console.log()在这些情况下执行。
在正文之间添加一个空格以获取后代
$(document).on('click', 'body :not(.add-to)', function(e){
//$('.tooltip').hide();
console.log('clik');
});
那里不需要身体
$(document).on('click', ':not(.add-to)', function(e){
//$('.tooltip').hide();
console.log('clik');
});
截至目前，您正在告诉没有课程的身体.add-to
因为您的选择器匹配所有body没有add-to类的元素。
你想要做的是这样的：
$(document).on('click', 'body > *:not(.add-to)', function(e){
console.log('click');
});
你需要一个空格body，:not(.add-to)否则你告诉它用 class 排除 body 元素add-to：
$(document).on('click', 'body :not(.add-to)', function(e){
//$('.tooltip').hide();
console.log('clik');
});