Javascript检测在div外的点击事件

32 浏览
0 Comments

Javascript检测在div外的点击事件

这个问题已经有答案了:
如何检测点击事件是否发生在元素之外？

社区曾经审查过这个问题，去年（2022年1月1日 16:10:53Z）决定将其关闭

原始关闭理由没有得到解决

我有一个id为"content-area"的div，当用户点击该div之外的位置时，我想提醒他们这一事实。我该如何使用JavaScript来解决这个问题？

      Display Conents

admin 更改状态以发布 2023年5月24日
0

2 答案

0 Comments

Node.contains() 方法返回一个布尔值，表示一个节点是否是给定节点的后代。

您可以使用以下方法捕获事件

document.addEventListener("click", clickOutside, false);
function clickOutside(e) {
   const inside = document.getElementById('content-area').contains(e.target);
}

请记得在正确的位置移除所监听的事件

document.removeEventListener("click", clickOutside, false)

0
0 Comments

使用纯 JavaScript

请查看这个 fiddle，看看它是否符合您的需求！

document.getElementById('outer-container').onclick = function(e) {
    if(e.target != document.getElementById('content-area')) {
        document.getElementById('content-area').innerHTML = 'You clicked outside.';          
    } else {
        document.getElementById('content-area').innerHTML = 'Display Contents';   
    }
}

http://jsfiddle.net/DUhP6/2/

0