javascript - 一个元素上有两个监听器 : let only one fire

Question

在多个事件处理程序对单个元素和操作进行操作的情况下，我如何才能强制仅触发一个事件？ JSFiddle .

$("#buttons").on("click", "button", function(){
    // only do this if the event below isn't fired
});
$("#buttons").on("click", "button.red", function(){
    // if this one happens, don't do the above one
});

Answer 1

对于更通用的解决方案，event.stopImmediatePropagation() 将阻止事件触发更多处理程序。对于绑定(bind)到同一元素的处理程序，它们绑定(bind)的顺序似乎很重要。您还可以将您有条件地不想触发的元素绑定(bind)到 DOM 中更高的元素并使用 e.stopPropagation():

$(document).ready(function(){
    $("#buttons").on("click", ".red", function(e){
        e.stopImmediatePropagation();
        $(this).css("color","red");
    });
    $("#buttons").on("click", "button", function(){        
        $(this).css("background","blue");
    });
});

http://jsfiddle.net/Ef5p7/

下面是如何使用 stopPropagation() 代替:

<div id="buttonsOuter">
    <div id="buttons">
        <button>turn blue</button>
        <button class="red">only turn text red</button>
        <button>turn blue</button>
        <button>turn blue</button>
        <button>turn blue</button>
    </div>
</div>

...

$(document).ready(function () {
    $("#buttons").on("click", ".red", function (e) {
        e.stopPropagation();
        $(this).css("color", "red");
    });
    $("#buttonsOuter").on("click", "button", function () {
        $(this).css("background", "blue");
    });
});

http://jsfiddle.net/CwUz3/