Question

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

<div id="mainContainer">

    <div id="childContainer">    
    </div>

     <div id="childContainer2"> 
    </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');

    });

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

Answer 1

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

考虑这个fiddle

$('#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;＆amp; event.stopPropagation会阻止事件传播到父级。

这是demo fiddle。

单击父项和子项中的事件

3 个答案: