冲突的事件处理程序 - 如何控制哪个处理程序被触发？

我有我的网页上的地址列表。每次添加新地址时，我都会执行一次Ajax保存，然后将新地址附加到我的地址列表中。每个地址都在一个DIV中，并为其指定了一个类，并且我为该类委派了一个点击处理程序，这样当点击地址div时，我就可以对其进行处理。我想要做的是在每个地址区域内包含一个链接，以便我编辑该特定地址。问题是，当链接被点击并且处理程序被调用了链接时，我也触发了div的处理程序。我的问题是：如何处理“编辑”链接点击而不触发它所在的div的点击处理程序？冲突的事件处理程序 - 如何控制哪个处理程序被触发？

<div id="addrdiv"> 
    <div class="customer-shipping-address"> 
     Name 1 
     Addr 1 
     <a href='' class='addredit'>Edit This Address</a> 
    </div> 
    <div class="customer-shipping-address"> 
     Name 2 
     Addr 2 
     <a href='' class='addredit'>Edit This Address</a> 
    </div> 
</div>

因为地址被追加到addrdiv，我已经委派每个格单击一下处理程序和各环节的点击，像这样：

$("#addrdiv").delegate(".customer-shipping-address", "click", function(e){ 
    // do things here when someone clicks the address block 
    ... 
} 

$("#addrdiv").delegate(".addredit", "click", function(e){ 
    // do things here when someone clicks the edit link within the block 
    ... 
}

当有人点击每个地址中的编辑链接，我希望链接的处理程序触发，而不是整个地址块的处理程序。这可能吗？如果是这样，怎么样？

来源

2014-10-09 pter

stopPropagation。 BOOOOOM – 2014-10-09 15:45:05

无法停止直播活动的传播。同样，由.delegate处理的事件（）@RubenSerrate – 2014-10-09 15:54:41

@StevenWeb hahaha .... NO http://jsfiddle.net/L52xco6w/ – 2014-10-09 15:59:40

因为我做了一个小提琴来证明我的评论，我虽然我会张贴它作为答案。

你需要调用stopPropagation方法，因此该事件将停止通过DOM（fiddle）冒泡：

$("#addrdiv").delegate(".customer-shipping-address", "click", function(e){ 
    // do things here when someone clicks the address block 
    ... 
} 

$("#addrdiv").delegate(".addredit", "click", function(e){ 
    // do things here when someone clicks the edit link within the block 
    e.stopPropagation(); 
}

来源

2014-10-09 16:01:59

在第二个事件处理程序中返回false将同样奏效。 – reggie 2015-06-12 19:14:54

在事件对象中有一个属性“target”，在这种情况下这个属性是clicked元素，所以你可以检查event.target == this。

示例使用jQuery。是：

$("#addrdiv").delegate(".customer-shipping-address", "click", function(e){ 
    if($(e.target).is(this)) { 
     //you can do $(e.target).is(".customer-shipping-address") too 
     console.log("clicked element is .customer-shipping-address"); 
    } 
});

来源

2014-10-09 15:48:42 fathyb

这是有用的 - 它不完全回答我的问题，但我可以看到明确的用途。谢谢 – pter 2014-10-09 17:00:16

-2

您需要将事件附加到的链接。

$("#addrdiv .customer-shipping-address a").delegate(".addredit", "click", function(e){ 

}

来源

2014-10-09 15:49:57

这不会阻止事件冒起来，尽管 – Quince 2014-10-09 16:07:17

实际上不确定这将作为.addredit是不是你的权利， – Quince 2014-10-09 16:13:43

您的权利，我想到的$（“＃addrdiv .addredit”）点击（ function（）{e.stopPropagation（）;}）; – 2014-10-09 16:46:06

stopPropagation（）将是一个快速的方法来实现这一目标，只是把它的.addredit处理程序中在事件

$("#addrdiv").delegate(".addredit", "click", function (e) { 
    e.stopPropagation(); 
    alert('edit clicked'); 
});

这里是一个小提琴http://fiddle.jshell.net/leighking2/phcjdfzd/

来源

2014-10-09 16:03:12 Quince

冲突的事件处理程序 - 如何控制哪个处理程序被触发？

回答

相关问题