我想检测 div 区域内部或外部的点击。棘手的部分是 div 将包含其他元素，如果单击 div 内的元素之一，则应将其视为内部单击，同样，如果单击 div 外部的元素，则应将其视为外部点击。
我一直在研究很多，但我能找到的只是 jquery 中的例子，我需要纯 javascript。
任何建议将不胜感激。
使用javascript检测div外的点击
IT技术
javascript
2021-03-11 11:22:23
6个回答
这取决于个别用例，但听起来在这个例子中，主 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。
您可以检查单击的 Element 是否是您要检查的 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')
我为此想出了一个技巧，它对我很有效，并且可能对其他人有帮助。
当我弹出对话框 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
}
}
}
这在 web/android/ios 上运行良好。这可能对某人有帮助，谢谢。
其它你可能感兴趣的问题