表演上的父/子元素的動作獨立

Question

我有HTML相似，在我的網頁下面

<div id="someDiv"> 
    <img src="foo.gif" class="someImg" /> 
</div> 

的包裝div設置，使得被點擊時，它是使用下面的jQuery代碼background-color變化。

$("div").click(function(event){ 
    $(this).css("background-color", "blue"); 
}); 

我也有一些jQuery的我img，會做一些其他的功能（參數我要顯示和提示框的緣故）相關的，像這樣：

$("img[class=someImg]").click(function(event){ 
    alert("Image clicked"); 
}); 

的問題，我碰到的是當我點擊img時，與div相關的事件也被觸發。我非常肯定，這是由於jQuery（甚至是JavaScript）處理這兩個DOM元素的方式 - 點擊img也需要您在技術上也單擊div，從而觸發這兩個事件。

兩個問題，然後真的：

1. 是我 DOM/JavaScript的理解以某種方式或 缺陷是這其實事情是如何發生 ？
2. 有沒有任何jQuery方法， 將允許我執行操作 一個子元素，而不會調用 那些與其父級關聯？

Answer 1

這被稱爲event bubbling，可以防止它與stopPropagation()：

$("img[class=someImg]").click(function(event){ 
    alert("Image clicked"); 
    event.stopPropagation(); 
}); 

。

1. 是我DOM/JavaScript的理解在某些方面有缺陷或 被這其實事情發生 如何？

這是因爲所謂event bubbling。

是否有任何jQuery方法，讓我在不調用 與其父有關的執行子元素的動作 ？

是的，你需要stopPropagation()

Answer 2

This is what's called event bubbling，你可以阻止它讓你想.stopPropagation()（或return false;的行爲，如果你想完全停止活動，包括在處理程序同一級別），像這樣：

$("img[class=someImg]").click(function(event){ 
    alert("Image clicked"); 
    event.stopPropagation(); 
}); 

You can view a demo here，其註釋掉，然後再次單擊運行看出區別。

簡短版本是，當大部分事件類型發生時，它們發生在直接元素上，然後冒泡DOM，發生在每個父母身上。這不是jQuery特有的，原生JavaScript執行此操作。如果你更好奇，I'd read the linked article, it has a great explanation of what's going on。

Answer 3

1. 不，這是設計。如果你在身體上放置了另一個處理程序，它也會觸發
2. 是的:) JQuery規範化事件對象，因此在img click處理程序中添加event.stopPropagation()將爲您提供所期望的所有瀏覽器行爲

Answer 4

你剛纔面臨的問題叫做「事件冒泡」。這意味着，如果您單擊嵌套的 元素，該點擊事件將「冒泡」DOM樹。 如果其他元素也綁定到單擊事件，他們的偵聽器也會觸發。

解決方案，以防止這就是所謂的：

stopPropagation()

這是你的事件處理程序

$("img[class=someImg]").click(function(event){ 
    event.stopPropagation(); 
    alert("Image clicked"); 
});