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

http://jsfiddle.net/DUhP6/2/

将 onClick-Event 绑定到内容区域之外的元素，例如正文。然后，在事件内部，检查目标是内容区域还是内容区域的直接或间接子级。如果没有，则警报。

我做了一个函数来检查它是否是一个孩子。如果节点的父节点是搜索到的父节点，则返回 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);
    }
}

另请查看实时示例（内容区域 = 灰色）！

所述Node.contains（）方法返回一个布尔值，表示节点是否是一个给定的节点的后代或不

您可以使用捕获事件

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

记得删除在正确位置监听的事件

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

我制作了一个简单而小巧的js 库来为你做这件事：

它劫持了本机 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.activeElement看，你的HTML元素的激活。

这是参考： MDN 中的 document.activeElement