如何防止单击子元素时触发点击处理程序？

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>