检测特定div及其所有子级之外的点击 [英] Detect clicks outside of specific div and all of it's children

问题描述

我一直在阅读以下内容:

https://css-tricks.com/dangers-stopping-event-propagation/

我想以适当且安全的方式实施此操作.

我想在div之外单击类 container 的div时触发 console.log .每当我在具有类 container 的div上单击 inside 或

上的div时，它就不会触发.

现在.我可以自己解决这个问题，但是无论容器div内有多少个元素，甚至嵌套的数量如何，似乎都存在一个聪明的解决方案，可以做到这一点.

当我单击带有类 container 的实际div时，下面的代码适用，但是当我单击其中的某个元素(即按钮)时，不是容器div.

js:

  document.addEventListener('click'，函数(event.target){if(document.getElementsByClassName('container')[0]！== event.target){console.log('在div之外单击');}}); 

html:

 < div class ="container">< div>< button>我将点击这里！</button>< div></div> 

必须有一个良好的实践方法，以下是评分最高的答案解决方案

您的方法正确，只需要对代码进行一点更改.不仅要检查event.target是否与div相同，还要检查div是否包含事件目标:

  var container = document.getElementsByClassName('container')[0];document.addEventListener('click'，function(event){if(container！== event.target&&！container.contains(event.target)){console.log('在div之外单击');}}); 

如果由于某种原因不支持H​​TMLnode.contains()(Safari，我正看着你)，则可以使用以下代码片段检查某个元素是否包含另一个元素:

  function childOf(node，祖先){var child = node;while(child！== null){如果(子===祖先)返回true;子= child.parentNode;}返回false；} 

I've been reading the following:

https://css-tricks.com/dangers-stopping-event-propagation/

I want to implement this in a proper and safe way.

I would like to when I click outside the div with class container that the console.log is to trigger. Whenever I click inside or on the div with the class container for it to not trigger.

Now. I could fix this on my own, however it feels like there is probably a smart solution to be able to do this no matter how many elements are inside the container div, or even how nested it may become.

The code below works for when I click on the actual div with the class container, but not when I click on one of the elements (i.e. button) inside of the container div.

js:

document.addEventListener('click', function (event.target) {
  if(document.getElementsByClassName('container')[0] !== event.target){    
    console.log('clicking outside the div');
  }
});

html:

<div class="container">
  <div>
    <button>
      I will be clicking here!
    </button>
  <div>
</div>

There must be a good practice approach to this, the following top rated answer How do I detect a click outside an element? has spooked me when looking for an answer in other questions, I'd rather ask for a proper one instead.

No jQuery please!

解决方案

You're on the right way and only need one little change inside your code. Instead of only checking if the event.target is the same as the div, also check if the div contains the event target:

var container = document.getElementsByClassName('container')[0];
document.addEventListener('click', function( event ) {
  if (container !== event.target && !container.contains(event.target)) {    
    console.log('clicking outside the div');
  }
});

If for some reason HTMLnode.contains() is not supported (safari, im looking at you), you can use following snippet to check if an element contains another:

function childOf( node, ancestor ) {
    var child = node;
    while (child !== null) {
        if (child === ancestor) return true;
        child = child.parentNode;
    }
    return false;   
}

这篇关于检测特定div及其所有子级之外的点击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！