javascript - 仅在父级(元素外部)上使用 onclick() 时删除子级

Question

如何避免 #window 上的 closeWindow() 调用？目前，当单击屏幕上的任意位置时，#window-overlay 会与所有嵌套子项一起删除。但我只想在单击 #window-overlay 而不是 #window 时执行此操作。因此#window 可以有自己的点击事件。我绝对是 JS 菜鸟。只是尝试在不使用 display:block 等的情况下做模式类的事情...想法很简单，无论如何，我的窗口总是位于其他所有内容之上，因为它附加到 document.body 并且我不需要太关心 z-index 冲突和其他东西。同样，cloneNode 的性能也相当出色。我知道，我的函数不可重用，但我稍后会处理这个问题。可能我需要处理 e.stopPropagation() 但不知道如何实现它。

<template id="my-test">
    <div id="window-overlay" class="my-test" onclick="closeWindow()">
        <div id="window" class="window">
            <p>My Window</p>
        </div>
    </div>
</template>

function openProfile() {
    var myTest = document.querySelector('#my-test').content;
    document.body.appendChild(myTest.cloneNode(true));
}

function closeWindow() {
    var wo = document.querySelector('#window-overlay');
    var root = document.body
    root.removeChild(wo);
}

Answer 1

点击操作正在通过 #window-overlay 从 #window 组件传播。

然后，你需要停止这种传播，你可以这样做

<template id="my-test">
    <div id="window-overlay" class="my-test" onclick="closeWindow()">
        <div id="window" class="window" onclick="e => e.stopPropagation()">
            <p>My Window</p>
        </div>
    </div>
</template>

如果您在单击 #window 组件时需要执行其他操作，那么您可以定义它自己的函数，例如

<template id="my-test">
    <div id="window-overlay" class="my-test" onclick="closeWindow()">
        <div id="window" class="window" onclick="foo(event)">
            <p>My Window</p>
        </div>
    </div>
</template>


function foo(e) {
     e.stopPropagation();

     // your stuff here ...
}

希望对你有帮助!