最好的方法：不在 jQuery 中？答案

【问题标题】：The best way to do :not in jQuery?最好的方法：不在 jQuery 中？
【发布时间】：2011-02-12 19:51:54
【问题描述】：

当您单击打开的链接时，我在 jQuery 中有一个菜单，但我想要它，所以当您单击其他地方时，任何其他不是菜单的地方，它都会被隐藏。

目前我正在将点击事件绑定到

$(':not(#the_menu)')

但这似乎我将点击事件绑定到整个减去菜单，有没有更有效的方法来做这样的事情？

【问题讨论】：

标签： javascript jquery dom performance

【解决方案1】：

最好的方法是使用冒泡捕获，如下所示：

$(document).click(function() {
   //close menu
})

$("#the_menu").click(function(e) {
  e.stopPropagation();
});

它的工作原理是每次点击气泡（除非您停止它，通常由 return false; 或 event.stopPopagation()），所以无论您点击气泡一直到 DOM...如果点击这样做，我们就会关闭菜单。如果它来自菜单内部，我们会停止气泡...所以点击不会冒泡，从而触发关闭。这种方法在所有但菜单上只使用 2 个事件处理程序而不是 1 个，所以非常轻量级:)

【讨论】：

Woops 里面有“Propogation”，已修复
哇，太酷了。干杯。需要检查所有浏览器上的冒泡事件，你知道那里是什么样的。吃个苦头。
@Smickie - 幸运的是，jQuery 很好地规范了冒泡（只有少数个例外），因此 click 可以始终如一地工作。需要注意的一个大问题是 change 在 IE 中没有正确冒泡，导致 .live("change",..) 出现问题。

【解决方案2】：

将事件附加到文档正文 ($(body))。还将另一个事件附加到#the_menu，即阻止事件传播：

$(document.body).click(function() {
     //close menu if opened
});

$("#the_menu").click(function(e) {
     //code heere

     e.stopPropagation();
});

【讨论】：

【解决方案3】：

如何将菜单显示绑定到将鼠标悬停在包含它的元素上？

$("#parentId").hover(
    function() { //!! on hovering in
        $("#targetId").attr("display","block") ;
    } ,
    function() { //!! on hovering out
        $("#targetId").attr("display","none") ;
    }
) ;

如果它符合您的目标，这似乎更容易维护。

【讨论】：