jQuery 阻止子元素事件触发时父元素事件的触发

Question

最近我在使用jQuery时遇到了一些问题。让我们假设我有这样的元素：

<div id="parent1" class="parent">
    <div id="child1" class="children">
        <a href="" id="child_link1" class="child_link"></a>
    </div>
</div>

我有一个像这样的jQuery函数：

$(".parent").click(function(){
    alert("parent is clicked");
});

$(".child_link").click(function(){
    alert("child link is clicked");
});

如果我点击child_link，parent也会被触发。如何创建这样一种情况：如果我点击child_link，parent不会被触发？

- Henry Gunawan

Answer 1

您需要在子点击事件上停止事件传播，像这样：

：

您需要在子点击事件上停止事件传播，像这样：

$(".child_link").click(function(e) {
    e.stopPropagation();
    alert("child link is clicked");
});

Example fiddle

- Rory McCrossan

---

谢谢您的回复，我尝试过使用 stopPropagation 但是不幸的是，即使 child_link 的事件也没有被触发。 它只是返回到顶部页面并没有做任何事情。 - Henry Gunawan

你记得将事件传递给函数了吗？.click(function(e) { <-- 这里 - Rory McCrossan

Answer 2

子元素的事件处理程序应该像这样编写：

$(".child_link").click(function( event ){
    event.stopPropagation();
    alert("child link is clicked");
});

这将停止事件冒泡，父级的事件处理程序将不会被调用。

- Jan Hančič

---

谢谢回复，我尝试使用stopPropagation，但不幸的是，甚至子链接事件也没有被触发。它只是什么都没做就回到了顶部页面。 - Henry Gunawan

Answer 3

看到您的事件正在冒泡到其父级。因此，这里您需要使用 .stopPropagation();：

$(".child_link").click(function(ev){
  ev.stopPropagation(); //<----------------this stops the event to bubble up
  alert("child link is clicked");
});

- Jai

---

请分享下投票否决的原因？ - Jai

我不知道是谁在点踩。我已经给你点赞来补偿 :) - Jan Hančič

@Jai 或许重复回答的原因是被点踩了？你的回答与Rory McCrossan的回答相比有什么新的东西吗？同样的情况也适用于你Jan Hančič。 - tony

看起来有点不妙，因为我的回答是唯一一个没有被踩的，但这并不是我做的。正如所说，同样的回答在几秒钟内出现是很常见的，并不是踩的理由。给你们点个赞。 - Rory McCrossan

谢谢回复，我尝试使用stopPropagation，但不幸的是，甚至子链接事件也没有被触发。它只是返回到顶部页面什么都没做。 - Henry Gunawan