如何在点击时加入正文，但使用Javascript排除特定元素及其子元素

Question

当使用javascript将点击事件侦听器附加到主体时，如何编写仅在e.target不是包含类active或任何子元素的元素时才触发的条件？active中存在需要可单击的子元素。类似于当您单击模态上的任何位置时，它都会保持打开状态，但DOM上的其他任何位置都会被删除？

document.body.addEventListener("click", e => {
if (!e.target ...) {
// trigger functions
}
}

Answer 1

实现此效果的一种方法是侦听单击，然后在DOM中从e.target一直循环到document.body。

向上循环时，检查每个元素，看它是否包含类.active。如果是，则可以使用break语句结束函数。

这意味着你仍然可以有.active的子级，它们仍然可以点击，并将响应其他Event Listeners触发的其他功能。

工作示例：

const myFunction = (e) => {
let containsActiveClass = false;
let reviewNode = e.target;

while (reviewNode.nodeName !== 'BODY') {

if (reviewNode.classList.contains('active')) {
containsActiveClass = true;
break;
}

reviewNode = reviewNode.parentNode;
}

if (containsActiveClass === false) {
window.alert('You clicked! (But not on .active or any of its child elements.)');
}
}
document.body.addEventListener('click', myFunction, false);

.container {
display: flex;
justify-content: space-around;
align-items: center;
height: 180px;
background-color: rgb(127, 127, 191);
cursor: pointer;
}
.active {
cursor: default;
}
.active,
.inactive {
position: relative;
display: inline-block;
flex: 0 0 120px;
height: 120px;
text-align: center;
font-family: sans-serif;
font-size: 14px;
background-color: rgb(255, 0, 0);
}
.active div,
.inactive div {
position: absolute;
top: 30px;
left: 30px;
width: 60px;
height: 60px;
background-color: rgb(255, 255, 0);
}

<div class="container">
<div class="inactive">Inactive
<div>Inactive Child</div>
</div>
<div class="active">Active
<div>Active Child</div>
</div>
<div class="inactive">Inactive
<div>Inactive Child</div>
</div>
</div>

Answer 2

您可以将其与css选择器匹配

document.querySelectorAll('div').forEach(elem=>{
console.log(elem.id, elem.matches('.active, .active *'))
})

<div id=d1>
<div id=d2 class=active>
<div id=d3></div>
</div>
<div id=d4>
<div id=d5></div>
<div id=d6 class=active></div>
</div>
</div>