Question

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

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

但是，当您单击“父”并单击“嵌套”时，该功能会激活。这是代码：

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，它会将该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();
  });

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

2 个答案:

DEMO