一个元素上的两个侦听器：只让一个触发答案

【问题标题】：Two listeners on one element: let only one fire一个元素上的两个侦听器：只让一个触发
【发布时间】：2013-08-21 20:32:58
【问题描述】：

在多个事件处理程序对单个元素和操作进行操作的情况下，我如何才能强制仅触发其中一个事件？ 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
});

【问题讨论】：

Two Listeners One Element 听起来像是你想看反应视频的类型。

标签： javascript jquery events event-handling

【解决方案1】：

对于更通用的解决方案，event.stopImmediatePropagation() 将阻止事件触发更多的处理程序。对于绑定到同一元素的处理程序，它们绑定的顺序似乎很重要。您还可以将有条件不想触发的元素绑定到 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/

【讨论】：

【解决方案2】：

将第一个事件处理程序更改为：

$("#buttons").on("click", "button", function(){
    $(this).not('.red').css("background","blue");
});

jsFiddle example

【讨论】：

此事件处理程序仍会为“红色”事件触发。即使您仅在不是红色时才应用 css，但最初的问题是询问如何强制仅触发一个事件。

【解决方案3】：

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

【讨论】：

我认为他需要为每个函数调用不同的函数。

【解决方案4】：

尝试使用:not() http://api.jquery.com/not-selector/

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

});

这是工作小提琴： http://jsfiddle.net/SpFKp/4/

【讨论】：

【解决方案5】：

试试这个，函数会被调用，但是你可以添加条件不运行代码：

var functionCalledFlag =false;
$("#buttons").on("click", "button", function(){
        if(!functionCalledFlag ){
           functionCalledFlag =true;
       // only do this if the event below isn't fired
     }else{
       functionCalledFlag =false;
     }

});
$("#buttons").on("click", "button.red", function(){
    if(!functionCalledFlag ){
           // only do this if the event above isn't fired
       functionCalledFlag =true;
     }else{
       functionCalledFlag =false;
     }
});

【讨论】：