CODEWITHSUNDEEP
javascriptjqueryeventsevent-handling
brentonstrine
brentonstrine

Reputation: 22732

Two listeners on one element: let only one fire

In situations where multiple event handlers are operating on a single element and action, how can I force only one of the events to fire? 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
});

Upvotes: 1

Views: 625

Answers (5)

Jason P
Jason P

Reputation: 27012

For a more general solution, event.stopImmediatePropagation() will prevent the event from triggering any more handlers. For handlers bound to the same element, the order they are bound seems to matter. You could also bind the one that you conditionally don't want to fire to an element higher in the DOM and use 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/

Here's how you could use stopPropagation() instead:

<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/

Upvotes: 4

Farhan
Farhan

Reputation: 752

Try this,the functions will be called but you can add condition to not run the code: 

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;
     }
});

Upvotes: 0

Rob
Rob

Reputation: 5588

Try using :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");
    });

});

Here's the working fiddle: http://jsfiddle.net/SpFKp/4/

Upvotes: 0

adamdehaven
adamdehaven

Reputation: 5920

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

Upvotes: 0

j08691
j08691

Reputation: 207901

Change the first event handler to:

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

jsFiddle example

Upvotes: 1

Related Questions