jquery：如果在div内部，请点击鼠标

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时被触发

6 个解决方案

#1

$("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
});

#2

If you want to detect whether or not you've clicked inside or outside the div, set the event handler on the documentElement and 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!");
});

#3

Maybe this one will help you

也许这个会帮助你

$('body').click(function(){
    //do smth
});
$('div#in_or_out').click(function(e){
    e.stopPropagation();
    // do smth else
});

#4

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_out or 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 inside whether the click was inside in_or_out or not.

然后,每当发生单击时,您可以在内部检查点击是否在in_or_out内。

Reference: .hover()

Update:

No matter to which element you bind the click handler, you can always do this:

无论您绑定单击处理程序的哪个元素,您始终可以执行以下操作:

$('element').click(function() {
     if ($(this).attr('id') !== 'in_or_not') {

     }
 });

#5

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执行相同操作(将click-handler分配给文档本身)。但是我不确定这两件事是否会引发。

#6

Like this?

$("#in_or_out").click(function() {
    alert("IN DIV!");
});

#1

$("body > div").click(function() {
    if ($(this).attr("id") == "in_or_out") {
        // inside
    } else {
        // not inside
    }
});