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

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

Edit：正如下面的答案之一所述，我只想将事件处理程序附加到我的主体，并且还想知道单击了哪个元素。

这是一个不需要使用 jquery 的单行代码节点包含 https://developer.mozilla.org/en-US/docs/Web/API/Node/contains:

// 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 页面，浏览器支持似乎涵盖了几乎所有内容。