Javascript jquery：如果在 div 内，请单击鼠标
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2265297/
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
jquery: get mouse click if inside a div or not
提问by trrrrrrm
i have this HTML page
我有这个 HTML 页面
<html>
<body>
<div>a</div>
<div>b</div>
<div>c</div>
<div>d</div>
<div id='in_or_out'>e</div>
<div>f</div>
</body>
</html>
a,b,c,d,e and f could be divs also not just a plain text.
a,b,c,d,e 和 f 可以是 div，而不仅仅是纯文本。
I want to get the mouse click event, but how could i know if it's inside or outside #in_or_out div ?
我想获得鼠标点击事件，但我怎么知道它是在 #in_or_out div 内部还是外部？
EDIT :: guys, i know how to check if the div is click or not, but i want my event to be fired when the click is outside that div
编辑 :: 伙计们，我知道如何检查 div 是否被点击，但我希望当点击超出该 div 时触发我的事件
回答by harpax
$("body > div").click(function() {
if ($(this).attr("id") == "in_or_out") {
// inside
} else {
// not inside
}
});
EDIT: just learned, that there is a negate:
编辑：刚刚了解到，有一个否定：
$("body > div:not(#in_or_out)").click(function(e) {
// not inside
});
回答by Andy E
If you want to detect whether or not you've clicked inside or outside the div, set the event handler on the documentElementand let it propagate from the other elements upwards:
如果您想检测您是否在 div 内部或外部单击，请在 上设置事件处理程序documentElement并让它从其他元素向上传播：
$("html").click(function (e)
{
if (e.target == document.getElementById("in_or_out"))
alert("In");
else
alert("Out!");
});
回答by Ionu? Staicu
Maybe this one will help you
也许这个会帮助你
$('body').click(function(){
//do smth
});
$('div#in_or_out').click(function(e){
e.stopPropagation();
// do smth else
});
回答by Felix Kling
Depends what you want. If you only want to execute code, when it was inside#in_or_out, you can do:
取决于你想要什么。如果你只想执行代码，当它在里面时#in_or_out，你可以这样做：
$('#in_or_out').click(function(){ /* your code here */ });
You can have a status variable that says whether the mouse is in #in_or_outor not:
你可以有一个状态变量来说明鼠标是否在#in_or_out：
var inside = false;
$('#in_or_out').hover(function() { inside = true; }, function() { inside = false; });
Then whenever a click occurs you can check with insidewhether the click was inside in_or_outor not.
然后，无论何时发生点击，您都可以检查inside点击是否在内部in_or_out。
Reference: .hover()
参考： .hover()
Update:
更新：
No matter to which element you bind the clickhandler, you can always do this:
无论您将click处理程序绑定到哪个元素，您始终可以这样做：
$('element').click(function() {
if ($(this).attr('id') !== 'in_or_not') {
}
});
回答by Bobby
for inside it would be
因为在里面它会是
$("#in_or_out").click(function() {
// do something here
});
for outside...I've got no idea.
对于外面......我不知道。
Edit:You could try to do the same for body-tag (assigning a click-handler to the document itself). But I'm not sure if both events would fire by that.
编辑：您可以尝试对 body-tag 执行相同的操作（为文档本身分配一个点击处理程序）。但我不确定这两个事件是否会因此而触发。
回答by dale
Like this?
像这样？
$("#in_or_out").click(function() {
alert("IN DIV!");
});
