使用单个事件处理程序检测元素内部/外部的单击

Question

假设我的页面中有一个 div。如何通过 JavaScript 或 JQuery 检测用户点击 div 内容或 div 内容之外的内容。请帮助小代码片段。谢谢。

编辑：正如在下面的一个答案中评论的那样，我只想将一个事件处理程序附加到我的身体上，并且还想知道单击了哪个元素。

原文由 Thomas 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

使用 jQuery：

 $(function() {
  $("body").click(function(e) {
    if (e.target.id == "myDiv" || $(e.target).parents("#myDiv").length) {
      alert("Inside div");
    } else {
      alert("Outside div");
    }
  });
})

 #myDiv {
  background: #ff0000;
  width: 25vw;
  height: 25vh;
}

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myDiv"></div>

原文由 amosrivera 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

这是一个不需要使用 Node.contains 的 jquery 的单行代码：

 // Get arbitrary element with id "my-element"
var myElementToCheckIfClicksAreInsideOf = document.querySelector('#my-element');
// Listen for click events on body
document.body.addEventListener('click', function (event) {
    if (myElementToCheckIfClicksAreInsideOf.contains(event.target)) {
        console.log('clicked inside');
    } else {
        console.log('clicked outside');
    }
});

如果您想知道检查点击是否在元素本身上的边缘情况，Node.contains 会为元素本身返回 true（例如 element.contains(element) === true ），因此此代码段应该始终有效。

根据该 MDN 页面，浏览器支持似乎也涵盖了几乎所有内容。

原文由 KhalilRavanna 发布，翻译遵循 CC BY-SA 3.0 许可协议