如何在点击时进行正文但使用 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>