javascript - 如何阻止来自父 DOM 的点击事件？

Question

这个问题已经有答案了:

How do I prevent a parent's onclick event from firing when a child anchor is clicked? (25 个回答)

已关闭 5 年前。

说，我有

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() 而无需单击其父级？

Answer 1

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"