如何在单击子元素时阻止单击处理程序被触发？

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(e) {
    if(e.target == document.getElementById('father')) {
        //do stuff
    }
};

然后在 HTML 中，您只需要将事件参数添加到 javascript 函数中。

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