4

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

所以基本上我有一个 div，id="parent"，我希望能够隐藏它的内容，我还在这个 div 中嵌套了一个 div，id 为“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根本做不到的吗？非常感谢任何帮助！

谢谢！

4

2 回答 2

13

事件总是冒出来的。因此，如果您单击嵌套的 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...");
    }
});​

​</p>

演示

我不建议将点击事件附加到您要忽略的每个 div 上。当最终需要对嵌套 div 执行操作时，这是一种需要大量维护且非常容易出错的方式。

于 2012-09-29T13:00:44.970 回答
5

尝试

$('#nested').click(function(e) { 
    e.stopPropagation();
  });
于 2012-09-29T13:00:15.880 回答