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

How do I prevent a click handler being triggered when a child element is clicked?

本文关键字：单击 处理 程序 元素 何防止      更新时间：2023-09-26

我有两个div标签，第一个div是父亲，第二个div是儿子像这个一样在父亲内部

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

我在div father中添加了一个事件（onclick），就像这个一样

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

我的问题是为什么儿子在事件中继承父亲。

我希望当我点击Fatherdiv时实现事件，但当我点击son时没有实现任何东西，因为它没有任何事件。

这是由一种名为事件冒泡的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>

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

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

使用CSS禁用事件！

.parent-element .element{
   pointer-events: none;
}

当设置为"；none"；允许元素不接收悬停/单击事件，相反，该事件将发生在它后面的任何东西上。

https://caniuse.com/?search=pointer-事件

奇怪的是，我通过在子元素上调用：event.prventDefault（）和event.stopPropagation（）来解决同样的问题，冒泡行为消失了！。希望能有所帮助。

相关文章：