jQuery防止触发子事件时触发父事件[重复]答案

【问题标题】：jQuery Prevent parent's event to be triggered when child's event is triggered [duplicate]jQuery防止触发子事件时触发父事件[重复]
【发布时间】：2013-01-23 11:12:09
【问题描述】：

最近我在使用 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 不会被触发的情况？

【问题讨论】：

标签： jquery element parent

【解决方案1】：

你需要停止子点击事件的传播，像这样：

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

Example fiddle

【讨论】：

感谢您的回复，我尝试使用 stopPropagation 但不幸的是，即使 child_link 事件也没有触发。它只是回到首页什么也没做。
你记得将事件传递给函数吗？ .click(function(e) {

【解决方案2】：

孩子的事件处理程序应该这样写：

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

这将停止event bubbling，并且不会调用父级的事件处理程序。

【讨论】：

感谢您的回复，我尝试使用 stopPropagation 但不幸的是，即使 child_link 事件也没有触发。它只是回到首页什么也没做。

【解决方案3】：

看到您的事件正在冒泡到其父级。所以这里你必须使用.stopPropagation();:

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

【讨论】：

投反对票的原因？请分享。
我不知道谁反对投票。我投票赞成你补偿:)
@Jai 也许是在加倍答案中投反对票的原因？与 Rory McCrossan 的答案相比，您的答案有何新意？这同样适用于你 Jan Hančič
答案中还有一些 cmets 表示解决方案。
看来我的答案是唯一没有被否决的答案，但不是我。如前所述，可能会在几秒钟内发生重复的答案，并且没有理由拒绝投票。伙计们，请为我 +1。