单击父项和子项中的事件

我有一个父元素DIV有子div元素。 我为父级及其子级单独实现了单击。

 
 
 
 
 
 $('#mainContainer').click(function () { console.log('main container'); }).children().click(function () { console.log('childen'); return false; }); $('#childContainer2').click(function () { console.log('child container 2'); }); 

这工作正常。 但如果我点击一个孩子，那么事件会运行两次，这是它应该如何工作。 我的问题是 – 是否有一种方法可以显式地将事件写入不会影响子项的父项，以便子项不需要执行两次点击function？

Answer 1

是的，你可以，改变绑定事件的顺序和停止传播使用stopImmediatePropagation

考虑这个小提琴

 $('#childContainer2').click(function (e) { alert('child container 2'); e.stopImmediatePropagation() return false; }); $('#mainContainer').click(function () { alert('main container'); }).children().click(function (e) { alert('childen'); return false; }); 

Answer 2

您可以使用event.stopPropagation ：

 children().click(function (e) { e.stopPropagation(); console.log('childen'); return false; }); 

防止事件发生

Answer 3

两者都return false; ＆ event.stopPropagation停止事件传播到父级。

这是演示小提琴 。