RemoveChild when onclick() only on parent (outside of element)
RemoveChild when onclick() only on parent (outside of element)
如何避免 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);
}
点击操作正在从您的#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 ...
}
希望对您有所帮助!
您可以像这样更改此元素的 ID
document.querySelector('#window-overlay').id = "somethingelse";
而且你不需要移除子元素只需要改变这个元素的id
删除此行
root.removeChild(wo);
如何避免 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);
}
点击操作正在从您的#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 ...
}
希望对您有所帮助!
您可以像这样更改此元素的 ID
document.querySelector('#window-overlay').id = "somethingelse";
而且你不需要移除子元素只需要改变这个元素的id 删除此行 root.removeChild(wo);