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

Question

我有兩個 div 標簽，第一個 div 是父親，第二個 div 是兒子 在這樣的父親里面

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

我已經像這樣在 div 父親中添加了一個事件（onclick）

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

我的問題是為什么兒子在事件中繼承了父親。

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

Answer 1

這是由稱為事件冒泡的 JavaScript 特征引起的。 默認情況下，您的事件將“冒泡”到 DOM 中。

單擊子節點時，您將自動觸發其父節點的單擊事件。

默認情況下，當點擊一個元素時，會從內向外冒泡：這意味着首先會觸發子元素的click()事件，然后是父元素，等等。

您可以通過向子元素添加輔助點擊處理程序並告訴瀏覽器以跨瀏覽器兼容的方式停止冒泡來解決問題，如下所示（參見實時示例）：

<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>

Answer 2

您可以將事件作為closeFather function中的closeFather傳遞，然后檢查事件目標是否為父元素。 看這個例子

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

然后在 HTML 中，您只需將事件參數添加到 javascript function。

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

Answer 3

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