Javascript检测div外部的单击事件

我有一个id为=“content area”的div，当用户在该div之外单击时，我想提醒他们，他们在该div之外单击。我将如何使用JavaScript来解决这个问题

<div id = "outer-container">
   <div id = "content-area">
      Display Conents 
   </div>
</div>

显示元件

使用

document.activeElement

查看哪些html元素处于活动状态

以下是参考资料：

---

使用jquery作为DOM访问的最佳工具

$(document).click(function(e){
 if($(e.target).is("#content-area") || $(e.target).closest("#content-area").length)
  alert("inside content area");
else alert("you clicked out side content area");
});

在纯Javascript中 看看这把小提琴，看看这是不是你想要的

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';   
    }
}

这是小提琴：

$（'outercontainer:not（'contentarea'））.on（'click'，函数（事件）{df（事件）}）；
功能df（均衡）
{
var xstart=$（'#contentarea'）.offset（）.left；
var xend=$（'#contentarea'）.offset（）.left+$（'#contentarea'）.width（）；
var ystart=$（'#contentarea'）.offset（）.top；
var yend=$（'#contentarea'）.offset（）.top+$（'#contentarea'）.height（）；
var xx=evenement.clientX；
var yy=evenement.clientY；
如果（！（（xx>=xstart&&xx=ystart&&yy将onClick事件绑定到内容区域之外的元素，例如主体。然后，在事件内部，检查目标是内容区域还是内容区域的直接或间接子项。如果不是，则发出警报

我创建了一个函数来检查它是否是子节点。如果节点的父节点是搜索的父节点，则返回true。如果不是，则检查它是否确实有父节点。如果不是，则返回false。如果它有父节点，但不是搜索的父节点，则检查父节点的父节点是否是搜索的父节点

function isChildOf(child, parent) {
    if (child.parentNode === parent) {
      return true;
    } else if (child.parentNode === null) {
      return false;
    } else {
      return isChildOf(child.parentNode, parent);
    }
}

还可以查看（内容区域=灰色）！
我为您做了一个简单而小的步骤：

它劫持本机addEventListener以创建outclick事件，并且在.onoutclick的原型上还有一个setter

基本用法

使用outclick，您可以在DOM元素上注册事件侦听器，以检测是否单击了该元素或其中的另一个元素。最常用的用法是在菜单中

var menu = document.getElementById('menu')

menu.onoutclick = function () {
    hide(menu)
}

这也可以使用addEventListener方法完成

var menu = document.getElementById('menu')

menu.addEventListener('outclick', function (e) {
    hide(menu)
})

或者，您也可以使用html属性outclick来触发事件。这不处理动态html，我们还没有计划添加它

<div outclick="someFunc()"></div>



玩得开心！
该方法返回一个布尔值，指示节点是否为给定节点的后代

您可以使用

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

请记住在正确的位置删除已侦听的事件

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

将此内容放入您的文档中：

<script>
document.onclick = function(e) {
  if(e.target.id != 'content-area') alert('you clicked outside of content area');
}
</script>


document.onclick=函数（e）{
如果（e.target.id！=“内容区域”）警报（“您在内容区域外单击”）；
}

这适用于在外部容器内单击，但在内容区域外单击的情况。这里有一个简单的eventListener，用于检查所有父元素（如果有）是否包含元素id。否则，单击在元素外部

html

1.到目前为止您尝试了什么？您可以发布该代码吗？2.您希望在
内容区域以外的任何位置单击检测（或）在
内容区以外的任何地方
但在
外部容器内
？@Harry，我不在乎OP采取了什么步骤。我只想看到这个问题的解决方案。让人们发表自己的尝试以确定他们是否值得回答是荒谬的。这个网站的目的是成为ans的主要存储库与编程相关的WER，让人们发布他们自己的尝试并不能进一步实现这一目标。另一方面，您的其他问题经过深思熟虑，如果它们是您要求查看尝试的唯一原因，那么这是公平的。但是，我注意到您没有提供答案，因此您可能觉得这个问题不值得。此功能是cal当我们在
#content area
内点击时，led也会亮起。快一点：
var element=document.getElementById（'outer-container'）；
然后只要
if（e.target.id！=element.id）
你应该一直使用
addEventListener（'click'，function（e）{…}）
而不是
.onclick=function（e）{…}
function..fiddle链接已过期。好吧，DOM API具有与递归函数相同的功能：。它具有非常好的支持（IE5+！）。今天才发现。这不是jquery问题。这不是jquery问题。
<script>
document.onclick = function(e) {
  if(e.target.id != 'content-area') alert('you clicked outside of content area');
}
</script>

$('#outer-container').on('click', function (e) {
     if (e.target === this) {
        alert('clicked outside');
     }
});

<div id="element-id"></div>

const handleMouseDown = (ev) => {
    let clickOutside = true
    let el = ev.target
    while (el.parentElement) {
        if (el.id === "element-id") clickOutside = false
        el = el.parentElement
    }
    if (clickOutside) {
        // do whatever you wanna do if clicking outside
    }
}
document.addEventListener("mousedown", handleMouseDown)