javascript - stopPropagation() 但保持其他点击事件处于活动状态

Question

我有一些 jQuery 代码来关闭我的菜单：

$('body').click(function(){
  $('#menu').hide();
});
$("#menu").click(function(e) {
  e.stopPropagation();
  return false;       
});

但是，在我的 #menu 元素上，我有一些附加了点击事件的元素：

$('.menu_elem').live("click", function(){
  //Do something
});

我的问题是 e.stopPropagation() 阻止了我的菜单的点击事件。我怎样才能避免这种情况？

Answer 1

您可以使用 e.target 来包含或排除条件中的元素用于 stopPropagation，

$("#menu").click(function(e) {
   if(e.target.id == "menu")
   {
     e.stopPropagation();
     return false;       
   }
});

Answer 2

我不确定我是否完全理解您的 HTML，但如果#menu是您的菜单的根目录并且.menu_elem是菜单中的菜单项，那么您可以将委托的事件处理更改为#menu像这样捕获：

$("#menu").on("click", ".menu_elem", function () {
   // do something
});

这具有以下优点：

1. 它更改了委托事件处理以捕获冒泡事件，#menu因此它不需要传播超出#menu以工作，因此您不必更改.stopPropagation()代码。

2. 它从（现在已弃用）.live()切换到替换.on()，这使您可以更好地控制冒泡事件的捕获位置。

Answer 3

在调用 stopPropagation.. 之前编写你想要执行的代码并调用它。

$("#menu").click(function(e) {

// Your code here
  e.stopPropagation();
  return false;       
});

或者使用 target 属性来包含你的点击事件