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

Question

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

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

Answer 1

这是一个不需要 jquery 使用 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 页面，浏览器支持似乎涵盖了几乎所有内容。