单击div而不是嵌套div时的jquery函数

Question

我再次迫切需要你的帮助.

所以基本上我有一个div,id ="parent",我希望能够隐藏它的内容,我还在这个div中嵌套了一个div,其id为"嵌套"."父"比"嵌套"宽,所以我想要发生的是当你点击"父"时我想要激活隐藏功能,但是如果你点击"嵌套"这个隐藏功能不会激活.

但是,当您单击"父"并单击"嵌套"时,该功能会激活.这是代码:

HTML:

<div id="parent">
    <div id="nested">
        <p>Contents</p>
    </div>  
</div>

JQUERY :(把一个console.log放在那里代表hide函数)

var parent = $('#parent');
var nested = $('#nested');

parent.not(nested).click(function(){
    console.log('Click');
});

看起来它应该很简单,但我无法弄明白!我的选择者错了吗？这是JQuery根本无法做到的事情吗？任何帮助非常感谢!

谢谢!

Answer 1

事件总是冒出来的.因此,如果您单击嵌套的div,它会将该click事件冒泡到父级.

如果我理解正确你只想在单击父级时执行click事件而不是嵌套div本身.

只需验证当前事件是否由父进程触发,然后才执行代码.

编辑
更新以使用event.target,因为显然event.srcElement不是跨浏览器兼容的.

var parent = $('#parent');

parent.click(function(event){
    if(event.target === this){
      console.log("parent was clicked and we execute actions...");
    }
    else{
        console.log("something else within parent was clicked and is ingored...");
    }
});?

​

DEMO

我不建议将点击事件附加到您要忽略的每个div.当嵌套div上需要最终操作时,这是很多维护和非常容易出错的方法.

Answer 2

尝试

$('#nested').click(function(e) { 
    e.stopPropagation();
  });