Question

如何避免closeWindow()上的#window呼叫？当前#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组件通过＃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）;

仅在父级（元素外部）上的onclick（）时使用RemoveChild

2 个答案: