Question

我的页面上有一个地址列表。每次添加新地址时，我都会执行Ajax保存，然后将新地址附加到我的地址列表中。每个地址都在DIV中，并为其分配了一个类，我已经为该类委派了一个单击处理程序，以便在单击地址div时，我会对它执行某些操作。我想要做的是在每个地址div中包含一个链接，允许我编辑该特定地址。问题是，当单击链接并为链接调用处理程序时，我也会触发div的处理程序。我的问题是：如何处理＆＃34;编辑＆＃34;链接点击没有触发它所在的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点击委派了点击处理程序，每个链接点击如下：

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

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

Answer 1

由于我做了一个小提琴来证明我的评论是合理的，但我会将其作为答案发布。

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

Answer 2

stopPropagation（）将是一种快速实现此目的的方法，只需在事件的.addredit处理程序中调用它

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

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

Answer 3

在事件对象中有一个属性“target”，在这种情况下，此属性是单击的元素，因此您可以检查event.target == this。

使用jQuery .is的示例：

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

Answer 4

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

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

}

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

4 个答案: