javascript - JQuery 忽略 .not() 函数

Question

我有疑问，为什么 JQuery 忽略此代码中的 .not:

$('body').not('#footer').on('click',function(){
    if (($('#footer')).is(":visible")) {
        $('#footer').fadeOut();
    }
});

基本上，我想关闭#footer，但只能通过单击#footer之外的其他元素来关闭。上面的代码完成了他的工作，但是单击 #footer 也会淡出该元素，这是不希望的。

另一方面，这会起作用:

$('div').not('#footer').on('click',function(){
    if (($('#footer')).is(":visible")) {
        $('#footer').fadeOut();
    }
});

现在的缺点是，如果我点击 #footer 内的 div，这也会将其关闭，所以不是完美的解决方案。

我的问题是，我如何定位所有元素来关闭#footer，而不是#footer 及其子元素。

谢谢您的建议。

我使用过这个选择器:$('body').children().not('#footer').on('click',function(){上面的内容现在仅当我单击正文而不是 #footer 本身时才关闭 #footer。

但是现在，单击元素的左边距或右边距不会执行任何操作。屏幕更精确，以图像形式显示。

Answer 1

why JQuery ignores .not in this code

因为你的 body 元素没有 id 页脚，但你的一些 div 元素显然有!

<小时/>

你可以这样做:

$('div:not(#footer)').on('click',function(){
    // if we're not a child of footer and footer is visible
    if ($(this).parents('#footer').length == 0 && ($('#footer')).is(":visible")) {
        $('#footer').fadeOut();
    }
});

或者更好的解决方案是:

$('body').on('click',':not(#footer)',function(){
    // as above
});

因为这不会将事件绑定(bind)到页面上的每个非页脚 div。

或者您可以将所有工作滚动到委托(delegate)的选择器中以保持简洁。

$('body').on('click',':not(#footer,#footer>*)',function(){
    $("#footer").fadeOut();
});

请记住，使用这些委托(delegate)解决方案会产生巨大的开销，因为对于页面上的每次点击，处理程序都会运行一次，不仅仅是一次，而是针对 event.target 和每个它的 .parentNode。

因此，在每种情况下，选择器都会运行并遍历 body 以查看该元素是否位于 #footer 中。

这意味着，如果您单击嵌套 20 个元素深度的节点，它将从 event.target 开始，向上遍历这 20 个节点，并查看它不在 #footer 中。然后它将再次从 event.target 的 .parentNode 开始，向上遍历 19 个节点，然后向上遍历 18 个节点，然后遍历 17 个节点，依此类推。

此外，.fadeOut() 最终将被多次调用

所以你可以看到这总体上效率很低。

<小时/>

另请记住，这些解决方案要求 #footer 是 body 的直接子级。如果 body 之前有某个父元素，它就会淡出。