Bind event to right mouse click

Question

How can I trigger some action with right click after disabling the browser context menu ?

I tried this . . .

$(document).ready(function(){
$(document).bind("contextmenu",function(e){
return false;
$('.alert').fadeToggle();
});
});

.alert {
visibility: hidden;
}

Answer 1

There is no built-in oncontextmenu event handler in jQuery, but you can do something like this:

$(document).ready(function(){ 
    $(document)[0].oncontextmenu = function() {return false;} 

    $(document).mousedown(function(e){ 
      if( e.button == 2 ) { 
         alert('Right mouse button!'); 
         return false; 
       } else { 
         return true; 
        } 

    }); 
});

Basically I cancel the oncontextmenu event of the DOM element to disable the browser context menu, and then I capture the mousedown event with jQuery, and there you can know in the event argument which button has been pressed.

You can try the above example here.

Answer 2

Is 'contextmenu' an event?

I would use 'onmousedown' or 'onclick' then grab the MouseEvent's button property to determine which button was pressed (0 = left, 1 = middle, 2 = right).

Answer 3

See my comment in your code.

$(document).ready(function(){
    $(document).bind("contextmenu",function(e){
        return false;
        $('.alert').fadeToggle(); // this line never gets called
    });
});

Try swapping the return false; with the next line.

asked Apr 1 '09

Aha! :)