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