Question

说，我有

RUN CODE SNIPPET

在这种情况下，如果我单击子元素，也会单击它的父元素，因此同时调用parent（）child（）。如果没有单击父级，我怎么才能调用child（）？

Answer 1

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

 event.stopPropagation();

Answer 2

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

这称为bubbling。这个过程被称为“冒泡”，因为从内部元素到父母的事件bubble就像水中的泡泡一样。

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

您可以使用stopPropagation方法。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 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"

如何防止来自父DOM的点击事件？

4 个答案: