jquery - 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，则不会触发 parent 的情况？

Answer 1

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

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

示例小提琴

Answer 2

看到你的事件正在冒泡到它的父级。所以在这里你必须使用.stopPropagation();：

$(".child_link").click(function(ev){
  ev.stopPropagation(); //<----------------this stops the event to bubble up
  alert("child link is clicked");
});

Answer 3

孩子的事件处理程序应该这样写：

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

这将停止事件冒泡，并且不会调用父级的事件处理程序。