使用单个事件处理程序检测元素内部/外部的单击 [英] Detect click inside/outside of element with single event handler

问题描述

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

Suppose I have one div in my page. how to detect the user click on div content or outside of div content through JavaScript or JQuery. please help with small code snippet. thanks.

编辑：如下面的一个答案所述，我只想在我的身体上附上一个事件处理程序，并且还想知道点击了哪个元素。

Edit: As commented in one of the answers below, I only want to attach an event handler to my body, and also want to know which element was clicked upon.

推荐答案

在JavaScript中（通过jQuery）：

In JavaScript (via 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>

这篇关于使用单个事件处理程序检测元素内部/外部的单击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！