Javascript 使用javascript检测div外的点击
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/36695438/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Detect click outside div using javascript
提问by James Bubb
I'd like to detect a click inside or outside a div area. The tricky part is that the div will contain other elements and if one of the elements inside the div is clicked, it should be considered a click inside, the same way if an element from outside the div is clicked, it should be considered an outside click.
我想检测 div 区域内部或外部的点击。棘手的部分是 div 将包含其他元素，如果单击 div 内的元素之一，则应将其视为内部单击，同样，如果单击 div 外部的元素，则应将其视为外部点击。
I've been researching a lot but all I could find were examples in jquery and I need pure javascript.
我一直在研究很多，但我能找到的只是 jquery 中的例子，我需要纯 javascript。
Any suggestion will be appreciated.
任何建议将不胜感激。
回答by James Bubb
It depends on the individual use case but it sounds like in this example there are likely to be other nested elements inside the main div e.g. more divs, lists etc. Using Node.containswould be a useful way to check whether the target element is within the div that is being checked.
这取决于个别用例，但听起来在这个例子中，主 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
}
});
An example that has a nested list inside is here.
这里有一个内部嵌套列表的示例。
回答by mohamed-ibrahim
You can check if the clicked Element is the div you want to check or not:
您可以检查单击的 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');
}
}
Referring to Here.
参考这里。
回答by usman khan
you can apply if check for that inside your click event
你可以申请如果在你的点击事件中检查
if(event.target.parentElement.id == 'yourID')
回答by nbardach
I came up with a hack for this that's working well for me and that might help others.
我为此想出了一个 hack，它对我很有效，并且可能对其他人有帮助。
When I pop up my dialog DIV, I simultaneously display another transparent DIV just behind it, covering the whole screen.
当我弹出对话框 DIV 时，我同时在它后面显示另一个透明 DIV，覆盖整个屏幕。
This invisible background DIV closes the dialog DIV onClick.
这个不可见的背景 DIV 关闭对话框 DIV onClick。
This is pretty straightforward, so I'm not going to bother with the code here. LMK in the comments if you want to see it and I'll add it in.
这非常简单，所以我不打算打扰这里的代码。如果你想看到它，请在评论中 LMK，我会添加它。
HTH!
哼！
回答by Kamlesh
In Angular 6 and IONIC 3, I do same as here:
在 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
}
}
}
This working fine on web/android/ios. It might be helpful for someone, Thanks.
这在 web/android/ios 上运行良好。它可能对某人有帮助，谢谢。
回答by thadam
Try this solution it uses pure javascript and it solves your problem. I added css just for better overview... but it is not needed.
试试这个使用纯 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>