使用javascript检测div外部的单击

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

我已经做了很多研究，但我能找到的只是jquery中的示例，我需要纯javascript

---

如果您有任何建议，我们将不胜感激。

您可以检查单击的元素是否是要检查的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');
  }
}

---

参考。

您可以检查单击的元素是否是要检查的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');
  }
}

---

参考。

如果在单击事件中检查，则可以应用

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

---

如果在单击事件中检查，则可以应用

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

---

试试这个解决方案，它使用纯javascript，解决了您的问题。我添加css只是为了更好的概述。。。但这是不必要的。

document.getElementById（'outer-div'）。addEventListener（'click'，function（）{
警报（'单击外部分区…）；
});
document.getElementById（'inner-div'）。addEventListener（'click'，函数（e）{
e、 停止传播（）
警报（'单击内部分区…）；
});
#外部分区{
宽度：200px；
高度：200px；
位置：相对位置；
背景：黑色；
}
#内分区{
顶部：50px；
左：50px；
宽度：100px；
高度：100px；
位置：绝对位置；
背景：红色；
}
试试这个解决方案，它使用纯javascript，可以解决您的问题。我添加css只是为了更好的概述。。。但这是不必要的。
document.getElementById（'outer-div'）。addEventListener（'click'，function（）{
警报（'单击外部分区…）；
});
document.getElementById（'inner-div'）。addEventListener（'click'，函数（e）{
e、 停止传播（）
警报（'单击内部分区…）；
});
#外部分区{
宽度：200px；
高度：200px；
位置：相对位置；
背景：黑色；
}
#内分区{
顶部：50px；
左：50px；
宽度：100px；
高度：100px；
位置：绝对位置；
背景：红色；
}
这取决于单个用例，但在本例中，似乎主div中可能有其他嵌套元素，例如更多div、列表等。使用将是检查目标元素是否在正在检查的div中的有用方法

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

一个内部有嵌套列表的示例是。
这取决于单个用例，但在这个示例中，似乎主div中可能有其他嵌套元素，例如更多div、列表等。使用将是检查目标元素是否在正在检查的div中的有用方法

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

一个内部有嵌套列表的示例是。
我想出了一个解决方法，对我来说效果很好，可能会帮助其他人

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

此不可见的背景DIV关闭对话框DIV onClick

这非常简单，所以我不想在这里讨论代码。如果你想看，请在评论中加上LMK，我会加进去的

嗯
 我想出了一个解决这个问题的方法，它对我很有效，而且可能会帮助其他人

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

此不可见的背景DIV关闭对话框DIV onClick

这非常简单，所以我不想在这里讨论代码。如果你想看，请在评论中加上LMK，我会加进去的

嗯
 在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
    }
  }
}

从'angular/core'导入{Component}；
@组成部分({
选择器：“我的应用程序”，
模板：`
`
})
导出类AppComponent{
onClick（事件）{
var target=event.target | | event.src元素| | event.currentTarget；
if（document.getElementById（'warning-container'）。包含（目标））{
//在框中单击
}否则{
//在框外单击
}
}
}

这在web/android/ios上运行良好。
这可能会对某人有所帮助，谢谢。
在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
    }
  }
}

从'angular/core'导入{Component}；
@组成部分({
选择器：“我的应用程序”，
模板：`
`
})
导出类AppComponent{
onClick（事件）{
var target=event.target | | event.src元素| | event.currentTarget；
if（document.getElementById（'warning-container'）。包含（目标））{
//在框中单击
}否则{
//在框外单击
}
}
}

这在web/android/ios上运行良好。
这可能会对某人有所帮助，谢谢。
我最近需要一个简单的vanilla 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;  
  }

我最近需要一个简单的vanilla 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;  
  }

然后将jquery单击绑定更改为javascript单击绑定。您发现了哪些使用jquery的示例？也许你应该试着把它们“翻译”成vanilla JS，如果你不知道怎么做的话，你可以从HTML元素
的内联onclick函数调用要调用的函数，然后只需将jquery click绑定更改为javascript click绑定。你发现了哪些使用jquery的例子？也许你应该试着把它们“翻译”成vanilla JS，如果你不知道怎么做的话，你可以从HTML元素
的内联onclick函数调用要调用的函数，这是值得的-你远远不够