一种删除元素点击事件的方法答案

【问题标题】：A way to remove click events for element一种删除元素点击事件的方法
【发布时间】：2013-01-24 09:53:00
【问题描述】：

我有一个元素#foo，它上面有点击事件。元素#foo 位于元素#bar 中，该元素也有点击事件。

<div id="bar">
  <div id="foo" />
</div>

当点击#foo 时，#bar 事件被调用，#foo 事件被忽略。这就是我现在想要的。

我正在寻找一种方法来从 #foo 元素中删除所有点击事件，除了我刚刚设置的事件和所有在 #foo 的父级上的事件。

编辑：这里是jsFiddle demo。我希望在第一个事件之前调用第二个事件。

编辑#2：这里是my code with your suggestions。没用。

【问题讨论】：

根据事件委托模型，最顶层的onclick事件将首先被处理。
好的，你试过了吗？
我什么都没试过，但我想我需要递归地上 DOM 树并删除事件。
当#foo 被点击时，#bar 事件被调用并且#foo 事件被忽略。 如果它已经被特别注意的话，这是正确的。否则，两个事件都会被调用。首先是#foo，然后是#bar。
你的#foo 元素没有内容，你确定你真的在点击它吗？

【解决方案1】：

如果您在 foo 上有一个点击事件并且您不希望它冒泡，您可以执行以下操作：

$("#foo").on('click', function(e){
     e.preventDefault();
     e.stopPropagation(); //this line will stop the click bubbling up the tree.
});

【讨论】：

嗯，在我的示例中这不起作用。实际情况是有一个$("body").on("click", "#foo", ...，然后像上面的5个节点是$("#baz .select").click( ...。我将这些行添加到第一个事件中，但它没有调用事件！
更新问题的代码显示：您的建议无效。

【解决方案2】：

使用stopPropagation函数，看一个例子：

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

【讨论】：

【解决方案3】：

试试这个

$('#foo').click(function(e){
     e.preventDefault();
     e.stopPropagation(); 
     $('#bar').trigger('click');
});

【讨论】：