Javascript检测div之外的点击事件答案

【问题标题】：Javascript Detect click event outside of div [duplicate]Javascript检测div之外的点击事件
【发布时间】：2013-09-24 10:44:02
【问题描述】：

我有一个 id="content-area" 的 div，当用户在该 div 之外点击时，我想提醒他们他们点击了该 div 之外的事实。我将如何使用 JavaScript 来解决这个问题？

<div id = "outer-container">
   <div id = "content-area">
      Display Conents 
   </div>
</div>

【问题讨论】：

1.你都尝试了些什么？你可以发布那个代码吗？ 2. 您希望在content-area 之外的任何地方（或）在content-area 之外但在outer-container 之内的任何地方进行点击检测？
@Harry，我不在乎 OP 采取了哪些步骤。我只想看到这个问题的解决方案。让人们发布自己的尝试以确定他们是否值得回答是荒谬的。该站点的目的是成为与编程相关的答案的主要存储库，让人们发布自己的尝试并不能进一步实现这一目标。另一方面，您的其他问题经过深思熟虑，如果它们是您要求查看尝试的唯一原因，那么这是公平的。但是我注意到你没有提供答案，所以也许你没有发现这个问题值得。

标签： javascript html events click

【解决方案1】：

使用document.activeElement 查看您的哪些 html 元素处于活动状态。

这是一个参考： document.activeElement in MDN

【讨论】：

【解决方案2】：

使用 jquery 作为 DOM 访问的最佳选择

$(document).click(function(e){
 if($(e.target).is("#content-area") || $(e.target).closest("#content-area").length)
  alert("inside content area");
else alert("you clicked out side content area");
});

【讨论】：

这不是 jquery 问题。

【解决方案3】：

在纯 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/

【讨论】：

这个函数在我们点击#content-area里面时也会被调用。
快一点：var element = document.getElementById('outer-container'); 然后只是if(e.target.id != element.id)
你应该一直使用addEventListener( 'click', function(e) { ... });。不是.onclick = funciton(e){ ... } 函数..
小提琴链接已过期。

【解决方案4】：

这里是小提琴：http://jsfiddle.net/uQAMm/1/

$('#outercontainer:not(#contentarea)').on('click', function(event){df(event)} );
function df(evenement)
{
    var xstart = $('#contentarea').offset().left;
    var xend = $('#contentarea').offset().left + $('#contentarea').width();

    var ystart = $('#contentarea').offset().top;
    var yend = $('#contentarea').offset().top + $('#contentarea').height(); 

    var xx = evenement.clientX;
    var yy = evenement.clientY;

    if ( !(  ( xx >=  xstart && xx <=  xend ) && ( yy >=  ystart && yy <=  yend )) )
    {
        alert('out');
    }


}

【讨论】：

这不是 jquery 问题。

【解决方案5】：

将 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);
    }
}

还可以查看Live Example（内容区域 = 灰色）！

【讨论】：

嗯，DOM API 具有与您的递归函数等价的功能：node.contains。它有很好的支持（IE5+！）。今天才发现。

【解决方案6】：

我为你做了一个简单而小巧的js library：

它劫持了原生的 addEventListener，创建了一个 outclick 事件，并且在原型上还有一个 setter 用于 .onoutclick

基本用法

使用 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>

玩得开心！

【讨论】：

【解决方案7】：

Node.contains() 方法返回一个布尔值，指示节点是否是给定节点的后代

您可以使用

捕获事件

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

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

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

【讨论】：

【解决方案8】：

将其放入您的文档中：

<script>
document.onclick = function(e) {
  if(e.target.id != 'content-area') alert('you clicked outside of content area');
}
</script>

【讨论】：

【解决方案9】：

$('#outer-container').on('click', function (e) {
     if (e.target === this) {
        alert('clicked outside');
     }
});

这适用于您在 outer-container 内部但在 content-area 外部单击的情况。

【讨论】：

【解决方案10】：

这是一个简单的 eventListener，它检查所有父元素是否包含元素的 id。否则，点击在元素之外

html

<div id="element-id"></div>

js

const handleMouseDown = (ev) => {
    let clickOutside = true
    let el = ev.target
    while (el.parentElement) {
        if (el.id === "element-id") clickOutside = false
        el = el.parentElement
    }
    if (clickOutside) {
        // do whatever you wanna do if clicking outside
    }
}
document.addEventListener("mousedown", handleMouseDown)

【讨论】：