如何在jQuery中使用:not的最佳方法？

Question

我是一位有用的助手，可以为您翻译文本。

当你在jQuery中点击链接时，会弹出一个菜单，但我希望当你点击其他任何不是菜单的地方时，它会隐藏起来。

目前，我正在绑定一个点击事件到

$(':not(#the_menu)')

但是这似乎是将点击事件绑定到整个除菜单之外的区域，有没有更有效的方法来做类似的事情？

- CafeHey

Answer 1

最好的方法是使用冒泡捕获，像这样：

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

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

这是如何工作的：每次点击都会冒泡（除非您停止它，通常通过return false;或event.stopPopagation()），所以您点击的任何内容都会一直冒泡到DOM……如果一个点击这样做了，我们关闭菜单。如果它来自菜单内部，我们停止冒泡……所以点击不会向上冒泡，触发关闭操作。这种方法仅使用2个事件处理程序，而不是在所有但菜单上使用1个事件处理程序，因此非常轻巧 :)

- Nick Craver

---

糟糕，我在那里写错了“Propogation”，已经修正。 - Nick Craver

哇，太酷了。干杯！不过需要在所有浏览器上检查事件冒泡，你知道它们是什么样的。吃个小点心。 - CafeHey

@Smickie - 幸运的是，jQuery非常好地规范化了冒泡（有一些例外），因此click可以始终正常工作。需要注意的一个重要问题是，在IE中change事件无法正确冒泡，这使得.live("change",..)存在问题。 - Nick Craver

Answer 2

将事件附加到文档的主体 ($(body))。还要将另一个事件附加到 #the_menu，以阻止事件传播：

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

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

     e.stopPropagation();
});

- Crozin

Answer 3

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

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

如果符合你的目标，这种方式似乎更容易维护。

- FK82