prevent previously defined events on mousedown for right-click only

Question

I have a soundboard with buttons that trigger AJAX posts on mousedown.

The ideal functionality is to play an audio on left-mousedown and cancel playback on right-mousedown.

The code I have so far disables the context menu and cancels the playback...however, if they are over a button when they right-click (that triggers other previously defined events), it will still honor the mousedown and play that audio.

$(document).ready(function(){ 
  document.oncontextmenu = function() {return false;};
  $(document).mousedown(function(e){ 
    if( e.which == 3 ) {
        e.preventDefault();
        Cancel_Playback();
      return false; 
    } 
    return true; 
  }); 
});

I am trying to disable the right-mousedown from triggering the previously defined events but honor the Cancel_Playback. Any ideas?

EDIT Updated Title and Description to more accurately reflect what I am trying to accomplish. This should also help: http://jsfiddle.net/g9sh1dme/15/

Answer 1

stopImmediatePropagation is probably the function you're looking for.

It cancels all other events bound to the the same element and any other delegates higher in the DOM. Order also matters as events are called in the order in which they were bound. You can only cancel events that were bound after the event doing the canceling.

I'm not sure if these changes maintain the validity of your program, but it demonstrates the function's use. Otherwise, I'd just check for right-mousedown in Play_Sound and exit out instead of banking on another event to cancel its execution.

Live Demo

$(document).ready(function(){ 
  document.oncontextmenu = function() {return false;};
  //For this to work you must bind to the same object or you must bind to something lower in the DOM.
  $(".sound").mousedown(function(e){ 
    if( event.which == 3 ) {
        Cancel_Playback();
        e.stopImmediatePropagation();
        return false; 
    } 
    return true; 
  }).mousedown(Play_Sound);
})

function Cancel_Playback() {
    alert("This is all that should be displayed on right-mousedown")
}

function Play_Sound() {
    alert("Display this on left-mousedown... but not on right-mousedown")
}