Javascript检测div之外的点击事件

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Javascript检测div之外的点击事件相关的知识,希望对你有一定的参考价值。

我有一个id =“content-area”的div,当用户点击这个div之外时,我想提醒他们他们点击它之外的事实。我如何使用javascript来解决这个问题?

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

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

还可以看看Live Example(内容区域=灰色)!

另一答案

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 library

它劫持了原生的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元素处于活动状态。

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

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

这是针对您在外部容器内部但在内容区域之外单击的情况。

另一答案

这是小提琴: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');
    }


}
另一答案

把它放到你的文件中:

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

使用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");
});

以上是关于Javascript检测div之外的点击事件的主要内容,如果未能解决你的问题,请参考以下文章

div上的JavaScript点击事件

编写javascript检测li中的点击事件

javascript-如何检测 iframe 中的滚动事件?

jquery设置焦点并触发事件

在javascript创建一个div,当触发onclick事件时调用一个方法,参数是这个div,代码怎么写

js隐藏div