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,也会触发父级.如何创建一种情况,如果单击child_link,父级将不会被触发？

Answer 1

您需要在子点击事件上停止传播,如下所示:

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

示例小提琴