RemoveChild when onclick() only on parent (outside of element)

Question

如何避免 closeWindow() 调用 #window？当前 #window-overlay 在屏幕上的任意位置单击时将与所有嵌套子项一起删除。但我只想在单击 #window-overlay 而不是 #window 时执行此操作。所以 #window 可以有自己的点击事件。我绝对是 JS 菜鸟。只是尝试在不使用 display:block 的情况下做模态类的东西......想法很简单，无论如何，我的 window 总是会在其他一切之上，因为它附加到 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 组件传播到您的#window-overlay。

那么，你需要停止这种传播，你可以这样做

<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 ...
}

希望对您有所帮助！

Answer 2

您可以像这样更改此元素的 ID

document.querySelector('#window-overlay').id = "somethingelse";

而且你不需要移除子元素只需要改变这个元素的id 删除此行 root.removeChild(wo);

RemoveChild when onclick() only on parent (outside of element)

RemoveChild when onclick() only on parent (outside of element)

javascript

removechild

clonenode