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

Example fiddle

Answer 2

为孩子的事件处理函数应该这样写这样：

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

这将停止event bubbling，父母的事件处理程序将不会被调用。

Answer 3

看到您的活动正在冒泡到其父母。所以在这里，你必须使用.stopPropagation();：

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