4

This is a simple code :

HTML

<a id="link" href="#">Ciao</a>

jQuery

$('#link').click(function () {
    alert("ciao");
});

in fact, left/middle button is triggered (the alert is printed) but with Right Click? Why not? And how can I trigger it?

Community
  • 1
  • 1
markzzz
  • 47,390
  • 120
  • 299
  • 507

5 Answers5

9

Bind mousedown to handle left, middle and right clicks:

$('#link').mousedown(function(e) {
   alert("ciao");
});

You can use e.which to determinate which button has been clicked. 1: left, 2: middle and 3: right.

Here's the demo: http://jsfiddle.net/fPhDg/9/

You can stop the contextmenu from appearing like this:

$('#link').contextmenu(false);

Demo: http://jsfiddle.net/y4XDt/

You should use this very very carefully! It only makes sense in some very rare cases.

js-coder
  • 8,134
  • 9
  • 42
  • 59
  • 10
    And please, use it for a very good reason and not some imaginary fear of "code stealing". Disabling the context menu will disable important browser feature and may disturb some of your users, they may even use a browser that will not allow you to bind this event. – Vincent Robert Jan 09 '12 at 16:39
  • @markzzz I thought you wanted to trigger the function if the left, middle or right button is clicked? If you are just looking for the right button use `.contextmenu(fn)`. – js-coder Jan 09 '12 at 16:39
  • And if I'd like to remove the context menu of the browser? So, without show the windows of the browser on the right click? – markzzz Jan 09 '12 at 16:41
  • Yes @Vincent Robert, but the Context menu is not disabled, I'll see it after the right click...! So, if I'd like to remove it? I won't do it, just to know... – markzzz Jan 09 '12 at 16:43
  • @markzzz You can call preventDefault() on the event object that is passed as a parameter of your event handler. But you will not do it... – Vincent Robert Jan 09 '12 at 16:46
  • Thanks! :) I promise, I won't :) Why this .contextmenu() is not listed on jQuery official API? – markzzz Jan 09 '12 at 16:50
  • Tried on Firefox, but the middle button doesnt work... so we have to think about this again! (removed as accepted answer). – markzzz Jan 10 '12 at 16:21
  • @markzzz Of course? You didn't try them? My answer was just the first and I didn't test in Firefox. ;) – js-coder Jan 10 '12 at 17:01
4

Use .contextmenu(...):

$('#link').contextmenu(function () {
    alert("ciao");
});

And if you want to catch both events, you could use the bind(...) function:

$('#link').bind('click contextmenu',function()
{
    alert("ciao");
});

http://jsfiddle.net/fPhDg/4/

ComFreek
  • 29,044
  • 18
  • 104
  • 156
2

You can subscribe to the click event and the contextmenu event like so:

$('#link').on('click contextmenu', function (e) {
  if (e.which === 3) {
    // Right mousebutton was clicked
    // 1 is left mousebutton
    // 2 is centre mousebutton
  }
});
Rich O'Kelly
  • 41,274
  • 9
  • 83
  • 114
1

try this...

$('#link').mousedown(function (event) {
    if(event.which === 1)
    alert("left click");
    if(event.which === 2)
    alert("center click");
    if(event.which === 3)
    alert("right clikc");
});

fiddle : http://jsfiddle.net/fPhDg/8/

dku.rajkumar
  • 18,414
  • 7
  • 41
  • 58
0

you can capture right mouse click like this :

<head>
<script>
function whichButton(event)
{
if (event.button==2)
  {
  alert("You clicked the right mouse button!");
  }
else
  {
  alert("You clicked the left mouse button!");
  }
}
</script>
</head>

<body onmousedown="whichButton(event)">
<p>Click in the document. An alert box will alert which mouse button you clicked.</p>
</body>
Alex Turpin
  • 46,743
  • 23
  • 113
  • 145
dov.amir
  • 11,489
  • 7
  • 45
  • 51