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

这是由名为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>

Answer 2

您可以将事件作为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 3

这是冒泡的事件。 DOM Events的核心部分。如果由return false触发事件，您可以closeFather并阻止处理程序中的冒泡（son，但您应该将事件传递给它）。

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

3 个答案: