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

Question

我再次急需您的帮助。

所以基本上我有一个 div，id="parent"，我希望能够与其内容一起隐藏，我还在这个 div 中嵌套了一个 div，id 为“嵌套”。 “父级”比“嵌套”宽，所以我想要发生的是，当您单击“父级”时，我希望激活隐藏功能，但是如果您单击“嵌套”，则此隐藏功能不会激活。

然而，当您点击“parent”和点击“nested”时，该功能会激活。这是代码:

HTML:

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

JQUERY:(放一个console.log代表隐藏功能)

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

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

看起来应该很简单，但我想不通!我的选择器错了吗？这是 JQuery 根本做不到的事情吗？非常感谢任何帮助!

谢谢!

Answer 1

事件总是冒泡。因此，如果您点击嵌套的 div，它会将点击事件冒泡到父级。

如果我没理解错的话，您只想在单击父项而不是嵌套的 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

I would not recommend attaching click events to every single div you want to ignore. That is way to much maintenance and very error prone when eventually actions are required on the nested divs.