javascript - 在jquery中的元素上停止事件传播

Question

我有一个元素如下所示：

<div id="treeTable123" class="collapsed">
<div id="test"></div>
</div>

我已使用 jquery 将点击功能绑定到 id 为“test”的 div。功能1：

 $(document).delegate('#test', 'click', function(e){
   ....
 });

我有另一个绑定到其他元素的点击功能：function2：

  $('[id^="treeTable"]').delegate('.collapsed', 'click', function(e){
  });

当我单击 id 为“test”的 div 时，两个事件都会被触发。所以我想阻止函数2中的事件点击函数1内的事件。我该怎么做？

Answer 1

$('[id^="treeTable"]').delegate('.collapsed', 'click', function(e){
   if($(e.target).closest('#test').length === 0) {
      // code placed inside this condition is not executed on clicking the element #test
   }
});

Answer 2

只需将e.stopPropagation()表单称为第一个回调。这是一个演示http://jsfiddle.net/eyXT7/2/。

Answer 3

你可以简单地使用e.stopPropagation()

更多信息

Answer 4

正如你所拥有的，它是不可能的。如果您不使用委托，则可以这样做，因为事件必须冒泡到委托目标才能触发事件处理程序。因此 function2 将在 function1 之前触发，并且您无法阻止它在触发后触发。

 $('#test').on('click', function(e){
     e.stopPropagation();
   ....
 });

http://jsfiddle.net/r5JaL/