父元素和子元素的点击事件

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');

    }); 

这个工作得很好。但是如果我点击子节点，那么事件会运行两次，这正是它应该的工作方式。我的问题是 - 是否有一种方法可以明确地将事件写入父级而不影响子级，使得子级不需要执行两次点击函数？

- KrishnaDhungana

---

抱歉，您能再解释一下您需要什么吗？ - Arun P Johny

你预期的结果是什么？http://jsfiddle.net/arunpjohny/hF6L9/1/ - Arun P Johny

你正在给第二个子元素绑定两个事件处理程序。你只想运行其中一个吗？如果是，你想要运行哪个？你可能在寻找 event.stopImmediatePropagation：http://api.jquery.com/event.stopImmediatePropagation/. - Felix Kling

@FelixKling 顺序也很重要。 - A.T.

@ArunPJohny，如果父元素有点击事件，那么当我点击它的子元素时，它会先执行父元素的点击事件。因此，我不得不明确地为其子元素编写返回false的代码。但是这种解决方案会导致点击函数在parent.children().click()和children.click()中运行两次。如何避免这种情况？ - KrishnaDhungana

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;
    });

- A.T.

Answer 2

您可以使用 event.stopPropagation 方法：

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

为了防止事件冒泡，请使用以下方法：

- Felix

Answer 3

return false; 和 event.stopPropagation 都能阻止事件冒泡到父元素。

这里是演示链接。

- Prakash Bhagat

---

返回 false 并执行 preventDefault()，因此仅想停止事件传播时不建议使用。 - आनंद