Question

我在页面中使用类似于以下内容的HTML

<div id="someDiv">
    <img src="foo.gif" class="someImg" />
</div>

设置包装器div，以便在单击它时，background-color使用以下jQuery代码进行更改。

$("div").click(function(event){
    $(this).css("background-color", "blue");
});

我还有一些jQuery与我的img相关联，它会执行其他功能（为了我要显示的参数和警告框），如下所示：

$("img[class=someImg]").click(function(event){
    alert("Image clicked");
});

我遇到的问题是，当我点击img时，也会触发与div相关联的事件。我很确定这是由于jQuery（或实际上是JavaScript）处理两个DOM元素的方式 - 点击img会要求你技术上点击{{ 1}}，从而触发两个事件。

真的有两个问题：

是我的理解 DOM / JavaScript以某种方式存在缺陷或事实上这是事实发生？
是否有任何jQuery方法会允许我对其进行操作没有调用的子元素那些与其父母相关的人？

Answer 1

这被称为 event bubbling ，您可以使用 stopPropagation() 阻止它：

$("img[class=someImg]").click(function(event){
    alert("Image clicked");
    event.stopPropagation();
});

我对DOM / JavaScript的理解是否以某种方式存在缺陷或   事实上这是事实   发生？

这是因为已知 event bubbling 。

是否有任何jQuery方法可以让我执行操作   在没有调用的子元素上   那些与其父母相关的人？

是的，您需要 stopPropagation()

Answer 2

This is what's called event bubbling，您可以停止使用.stopPropagation()获取所需的行为（如果您想完全停止活动，则可以return false;，包括同一级别的处理程序），像这样：

$("img[class=someImg]").click(function(event){
  alert("Image clicked");
  event.stopPropagation();
});

You can view a demo here，将其评论出来，然后再次点按“运行”以查看差异。

简短版本是当大多数事件类型发生时，它们发生在立即元素上，然后冒出DOM，在每个父节点上发生。这根本不是jQuery特有的，本机JavaScript就是这样做的。如果你更好奇，I'd read the linked article, it has a great explanation of what's going on。

Answer 3

不，这是设计上的。事件在整个dom中冒泡，如果你在身体上放置另一个处理程序，它也会发射
是:) JQuery规范化事件对象，因此在img点击处理程序中添加event.stopPropagation()将为您提供所有浏览器所期望的行为

Answer 4

您面临的问题称为“事件冒泡”。这意味着，如果您单击嵌套元素，该click事件将“冒泡”DOM树。如果其他元素也绑定到click事件，那么他们的侦听器也会触发。

防止这种情况的解决方案称为：

stopPropagation()

在您的事件处理程序中使用

$("img[class=someImg]").click(function(event){
   event.stopPropagation();
   alert("Image clicked");
});

独立地对父/子元素执行操作

4 个答案: