Javascript 仅在父级（元素外部）上单击onclick（）时移除child

如何避免

closeWindow（）

调用

#window

？当前，当单击屏幕上的任意位置时，窗口覆盖层与所有嵌套的子对象一起被删除。但我只想在单击

#窗口覆盖

时执行此操作，而不想单击

#窗口

。因此，

#窗口

可以有自己的点击事件。 我在JS上绝对是个笨蛋。只是尝试做模态类的东西，而不使用

显示：block

，等等。。。这个想法很简单，不管怎样，当我的窗口被附加到

document.body

中时，我的窗口总是位于其他所有窗口之上，我不需要太在意z索引冲突和其他东西。同样，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);
}

我的窗户

函数openProfile（）{
var myTest=document.querySelector（“#我的测试”）.content；
document.body.appendChild（myTest.cloneNode（true））；
}
函数closeWindow（）{
var wo=document.querySelector（“#窗口覆盖”）；
var root=document.body
去核根（wo）；
}

单击操作正从#窗口组件通过#窗口覆盖进行传播

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

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

我的窗户

例如，如果在单击#窗口组件时需要执行其他操作，则可以定义它自己的功能

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

我的窗户

函数foo（e）{
e、 停止传播（）；
//你的东西在这里。。。
}

---

希望有帮助

您可以更改此元素的ID或其他类似的内容

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

您不需要删除子元素，只需更改此元素的id即可 删除此行

---

去核根（wo）

谢谢你！。第二个案例帮助了我。除了您没有提到，我需要调用它

onclick=“foo（event）”

（应该传递事件参数）类似于

的东西！重要信息

来自CSS world，这意味着现在的构造非常好，应该避免？很快-这有味道吗？你说得对！我在写解决方案时没有注意到这一点。现在我为未来的读者添加了。。很抱歉提及，但这不是相同的概念！重要的是，甚至不接近。。当您确实单击某个元素时，该组件上的单击操作会将事件传播到每个父级，这就是为什么会出现这种行为。另一方面重要的是，这样的规范必须优先于其他没有它的规范。我明白了吗？谢谢。我不清楚我的最后一个问题。我试图问这是

e.stopPropagation（）一些来自“坏习惯”世界的东西，我通常应该避免它？一点也不，这取决于它是否有用和正确使用。使用e.stopPropagation可以告诉HTML事件只应用于子事件，而不希望实例化父事件的操作。您也可以在函数处理程序中使用return false，这一点更常见。然而，你问自己这个问题很好D