在我的窗口事件中,如果指针点击父对象或其子对象/后代对象,它应该做一些事情。
问题是事件无法访问 parent 的 child 和孙子。条件存储在 targetIsInsideParent
变量中。
HTML
<div class="parent">
Parent
<div class="child">
Child
<div class="grandchild">
GrandChild
</div>
</div>
</div>
JS
const parent = document.querySelector('.parent');
window.addEventListener('click', e => {
const targetIsParent = e.target === parent;
const targetIsInsideParent = e.target === parent.children; // !!!!
if(targetIsParent || targetIsInsideParent) {
console.log('Good');
}
})
最佳答案
尝试使用 parent.contains(e.target)
或 parent.compareDocumentPosition(e.target) === 20
const parent = document.querySelector('.parent');
window.addEventListener('click', e => {
const targetIsParent = e.target === parent;
const targetIsInsideParent = parent.contains(e.target);
// const targetIsInsideParent = parent.compareDocumentPosition(e.target) === 20; // alternative, but also works good
if(targetIsParent || targetIsInsideParent) {
console.log('Good');
}
})
<div class="parent">
Parent
<div class="child">
Child
<div class="grandchild">
GrandChild
</div>
</div>
</div>
<div>Other</div>
关于javascript - 在窗口单击事件中访问元素及其子/后代,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53157310/