0

如何避免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);
}
4

2 回答 2

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

希望能帮助到你！

于 2018-10-07T14:35:24.183 回答
0

您可以更改此元素的 ID，例如

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

并且您不需要删除子元素，只需更改此元素的 id 即可删除此行 root.removeChild(wo);

于 2018-10-07T14:38:15.913 回答