Two listeners on one element: let only one fire

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