如何防止單擊子元素時觸發點擊處理程序？

Question

我有兩個div標籤，第一個div是父親和第二個div是兒子的父親這樣

<div id="father"> 
<div id="son"> </div> 
</div> 

裏面我已經在DIV父親這樣

<div id="father" onclick="closeFather()"> 
<div id="son"> </div> 
</div> 

添加一個事件（的onclick）

我的問題是兒子在事件中繼承父親的原因。

我想要當我點擊父div實現事件，但是當我點擊兒子沒有實現任何東西，因爲它沒有任何事件。

Answer 1

您可以將事件作爲closeFather函數中的參數之一傳遞，然後檢查事件目標是否爲父元素。見this example

function closeFather(e) { 
    if(e.target == document.getElementById('father')) { 
     //do stuff 
    } 
}; 

然後在HTML你只需要到事件參數添加到JavaScript函數。

<div id="father" onclick="closeFather(event)"> 
<div id="son"></div> 
</div> 

Answer 2

這是事件冒泡。 DOM Events的核心部分。如果事件由son觸發，則可以使用return false並防止處理程序冒泡（closeFather，但應將事件傳遞給它）。

Answer 3

這是由稱爲event bubbling的JavaScript特徵引起的。默認情況下，您的事件將「冒泡」到DOM中。

單擊一個子節點時，會自動爲其父節點觸發一個單擊事件。

默認情況下，點擊一個元素時，冒泡由內而外發生的：這意味着第一個子元素的click()事件將被觸發，那麼它的父母等

可以解決問題通過添加輔助單擊處理程序到你的子元素以及並告訴瀏覽器停止在一個跨瀏覽器兼容的方式冒泡，像這樣（see live example）：

<script language="javascript"> 
    function parentHandler(e) { 
     alert('parent clicked'); 
    }; 

    function childHandler(e) { 
     if (!e) var e = window.event; 
     e.cancelBubble = true; 
     if (e.stopPropagation) e.stopPropagation();  

     alert('child clicked'); 

    };  
</script> 

<div id="parent" onclick="parentHandler(event);"> 
    Foo 
    <div id="child" onclick="childHandler(event)"> 
     Bar 
    </div> 
</div>