Question

我有这个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和f可以是div而不仅仅是纯文本。

我想获得鼠标点击事件，但我怎么知道它是在#in_or_out div的内部还是外部？

编辑::伙计们，我知道如何检查div是否点击，但我希望当点击超出该div时我的事件被触发

Answer 1

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

编辑：刚刚得知，有一个否定：

$("body > div:not(#in_or_out)").click(function(e) {
    // not inside
});

Answer 2

如果你想检测你是否在div内部或外部点击了，请在documentElement上设置事件处理程序，让它从其他元素向上传播：

$("html").click(function (e)
{
    if (e.target == document.getElementById("in_or_out"))
        alert("In");
    else
        alert("Out!");
});

Answer 3

也许这个会帮助你

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

Answer 4

取决于你想要的。如果您只想执行代码，当在 #in_or_out内时，您可以执行以下操作：

$('#in_or_out').click(function(){ /* your code here */ });

您可以拥有一个状态变量，指出鼠标是否在#in_or_out中：

var inside = false;

$('#in_or_out').hover(function() { inside = true; }, function() { inside = false; });

然后，只要发生点击，您就可以inside查看点击是否在in_or_out内。

<强>更新

无论您绑定click处理程序的哪个元素，都可以执行此操作：

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

     }
 });

Answer 5

对于里面它将是

$("#in_or_out").click(function() {
    // do something here
});

外面......我不知道。

编辑：您可以尝试对body-tag执行相同操作（将click-handler分配给文档本身）。但是我不确定这两个事件是否会被激发。

Answer 6

喜欢这个吗？

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