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

Question

我的页面上有一个地址列表。每次添加新地址时，我都会执行 Ajax 保存，然后将新地址附加到我的地址列表中。每个地址都位于一个分配有类的 DIV 中，并且我已为该类委托(delegate)了一个单击处理程序，以便当单击地址 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 中，所以我为每个 div 单击和每个链接单击委托(delegate)了单击处理程序，如下所示:

$("#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
    ...
}

当有人单击每个地址中的“编辑”链接时，我希望触发该链接的处理程序，而不是触发整个地址 block 的处理程序。这可以吗？如果是这样，怎么办？

Answer 1

由于我做了一些 fiddle 来证明我的评论是正确的，所以我想我会把它作为答案发布。

您需要调用 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();
}