jQuery防止子事件触发时触发父事件

Question

最近我在使用 jQuery 时遇到了一些问题。假设我有这样的元素:

<div id="parent1" class="parent">
    <div id="child1" class="children">
        <a href="" id="child_link1" class="child_link"></a>
    </div>
</div>

我有这样的 jQuery 函数:

$(".parent").click(function(){
    alert("parent is clicked");
});

$(".child_link").click(function(){
    alert("child link is clicked");
});

如果我点击child_link，parent也会被触发。如何创建一种情况，如果我点击 child_link，父级将不会被触发？

Answer 1

您需要停止子点击事件的传播，如下所示:

$(".child_link").click(function(e) {
    e.stopPropagation();
    alert("child link is clicked");
});

Example fiddle