如何防止来自父 DOM 的点击事件？ [复制]答案

【问题标题】：How can I prevent click event from parent DOM? [duplicate]如何防止来自父 DOM 的点击事件？ [复制]
【发布时间】：2018-10-18 01:27:00
【问题描述】：

说，我有

HTML:
<div onclick="parent()">
    <div onclick="child()"></div>
</div>

SCRIPT: {
function parent() {
    console.log("I'm your father");
}

function child() {
    console.log("You're not my father");
}

在这种情况下，如果我点击子元素，它的父元素也会被点击，所以 parent() child() 都会被调用。如何在不点击其父级的情况下仅调用 child()？

【问题讨论】：

Event.stopPropagation()（另外，最好在 Javascript 中分配处理程序而不是 HTML 属性 - 这和 eval 一样糟糕）
@CertainPerformance 你的意思是我不能使用 onclick, ng-click... 绑定功能做 DOM？我应该使用一堆 JQuery 吗？
在性能方面可能是正确的，但是，与一堆 jquery 选择器相比，维护不是那么容易吗？
@kispi 没有在你的问题中提到ng-click，但内联onclick 不好。
@kispi ng-click 与 onclick 属性不同。问题不在于性能——问题在于代码的可读性和可维护性。内联事件处理程序本质上是 HTML 标记中的 eval - 它们是不好的做法，会导致代码分解不良、难以管理。而是使用 Javascript 附加处理程序。（不，jQuery 绝对不需要仅仅分配一个处理程序）将展示内容与内容分开：将内容保存在 HTML 中，将 Javascript 保存在 Javascript 中。

标签： javascript html dom

【解决方案1】：

在您的子点击事件中添加以下内容以停止事件冒泡。

 event.stopPropagation();

【讨论】：

【解决方案2】：

从child() 尝试event.stopPropagation()，这将防止当前事件在捕获和冒泡阶段进一步传播。

function parent() {
    console.log("I'm your father");
}

function child(e) {
    e.stopPropagation();
    console.log("You're not my father");
}

<div onclick="parent()">Parent
    <div onclick="child(event)">Child</div>
</div>

【讨论】：

父点击似乎不起作用。

【解决方案3】：

这就是bubbling。这个过程被称为“冒泡”，因为事件bubble 从内部元素向上通过父元素就像水中的气泡。

当一个元素上发生事件时，它首先在其上运行处理程序，然后在其父级上运行，然后一直在其他祖先上运行。

您可以使用stopPropagation 方法。

function parent() {
    console.log("I'm your father");
}

function child(event) {
    event.stopPropagation();
    console.log("You're not my father");
}

#parent{
  background-color:red;
  width:100px;
  height:100px;
}

#child {
  background-color:blue; 
  width:30px;
  align:center;
  height:30px;
}

<div id="parent" onclick="parent()">
    <div id="child" onclick="child(event)"></div>
</div>

【讨论】：

对于那些赏金猎人，是的

【解决方案4】：

function parent() {
    console.log("I'm your father");
}

function child() {
    console.log("You're not my father");
    window.event.cancelBubble = "true";
}

<div onclick="parent()" style="height : 40px;width:40px; background:blue">
    <div onclick="child()" style="height : 10px;width:10px; background:red"></div>
</div>

你可以使用

window.event.cancelBubble = "true"

【讨论】：

感谢您提供额外信息。不知道 cancleBubble
@kispi Event.cancelBubble 属性是Event.stopPropagation() 的历史别名，请使用后者。