Question

我想检测div区域内外的点击。棘手的部分是div将包含其他元素，如果单击div中的一个元素，则应将其视为内部单击，如果单击div外部的元素，则应将其视为外部点击。

我一直在研究很多，但我能找到的只是jquery中的例子，我需要纯粹的javascript。

任何建议都将受到赞赏。

Answer 1

这取决于个别用例，但听起来像在这个例子中，主div内可能有其他嵌套元素，例如更多div，列表等。使用Node.contains将是检查目标元素是否在被检查的div内的有用方法。

window.addEventListener('click', function(e){   
  if (document.getElementById('clickbox').contains(e.target)){
    // Clicked in box
  } else{
    // Clicked outside the box
  }
});

内置嵌套列表的示例是here。

Answer 2

您可以检查点击的元素是否是您要检查的div：

document.getElementById('outer-container').onclick = function(e) {
  if(e.target != document.getElementById('content-area')) {
      console.log('You clicked outside');
  } else {
      console.log('You clicked inside');
  }
}

参考Here。

Answer 3

如果您在点击事件中检查了

，则可以申请

if(event.target.parentElement.id == 'yourID')

Answer 4

我想出了一个针对我的黑客，这对我很有用，可能对其他人有帮助。

当我弹出对话框DIV时，我同时在其后面显示另一个透明DIV，覆盖整个屏幕。

这个不可见的背景DIV关闭对话框DIV onClick。

这非常简单，所以我不打扰这里的代码。 LMK在评论中如果你想看到它，我会把它添加进去。

HTH！

Answer 5

在Angular 6和IONIC 3中，我的操作与此处相同：

import {Component} from 'angular/core';

@Component({
  selector: 'my-app',
  template: `
    <ion-content padding (click)="onClick($event)">
      <div id="warning-container">
      </div>
    </ion-content>
  `
})
export class AppComponent {
  onClick(event) {
    var target = event.target || event.srcElement || event.currentTarget;
    if (document.getElementById('warning-container').contains(target)){
      // Clicked in box
    } else{
      // Clicked outside the box
    }
  }
}

在Web / android / ios上运行正常。可能对某人有帮助，谢谢。

Answer 6

我最近需要一个简单的香草JS解决方案，该解决方案可以解决以下问题：

忽略特定的选择器，包括父母是否包含这些选择器之一
忽略特定的DOM节点

此解决方案在我的应用中效果很好。

const isClickedOutsideElement = ({ clickEvent, elToCheckOutside, ignoreElems = [], ignoreSelectors = [] }) => {
    const clickedEl = clickEvent.srcElement;
    const didClickOnIgnoredEl = ignoreElems.filter(el => el).some(element => element.contains(clickedEl) || element.isEqualNode(clickedEl));
    const didClickOnIgnoredSelector = ignoreSelectors.length ? ignoreSelectors.map(selector => clickedEl.closest(selector)).reduce((curr, accumulator) => curr && accumulator, true) : false;

    if (
      isDOMElement(elToCheckOutside) &&
      !elToCheckOutside.contains(clickedEl) &&
      !didClickOnIgnoredEl &&
      !didClickOnIgnoredSelector
    ){
      return true;
    }

    return false;
}

  const isDOMElement = (element) => {
    return element instanceof Element || element instanceof HTMLDocument;  
  }

Answer 7

尝试此解决方案，它使用纯JavaScript，它解决了您的问题。我添加了css只是为了更好的概述...但它不是必需的。

document.getElementById('outer-div').addEventListener('click', function(){
  alert('clicked outer div...');
});

document.getElementById('inner-div').addEventListener('click', function(e){
  e.stopPropagation()
  alert('clicked inner div...');
});

#outer-div{
  width: 200px;
  height: 200px;
  position: relative;
  background: black;
}

#inner-div{
  top: 50px;
  left: 50px;
  width: 100px;
  height: 100px;
  position: absolute;
  background: red;
}

<div id="outer-div">
  <div id="inner-div">
  </div>
</div>

使用javascript检测在div外部点击

7 个答案: