Can't use jquery's click event handler to detect right click

Question

In trying to detect a right mouse click with jquery, I noticed that the click event handler doesn't seem to be fired off with a right mouse click, while the mousedown or mouseup event handler's do.

For example, after a right click on the test div, the following alerts 'testing!':

$('#test').mousedown(function(e) {
    alert('testing');
});

However, the following does not:

$('#test').click(function(e) {
    alert('testing!');
});

Does anyone know why?

this should give you your answer: http://stackoverflow.com/questions/1206203/how-to-distinguish-between-left-and-right-mouse-click-with-jquery — Stefan H, Sep 08 '11 at 04:33
In Firefox, neither the middle nor the right mouse button is detected by $(elem).click(...). In Chrome, the middle works, but not the right...Also, note that before — jbyrd, Sep 08 '11 at 04:34
@Stefan H - no, I already read that post and unfortunately none of the answers deal with my question. — jbyrd, Sep 08 '11 at 04:39
As a side note - there is also a syntax error in the second alert should be alert('testing!'); note missing apostrophe — megaSteve4, May 28 '13 at 12:41

score 12 · Answer 1 · edited May 23 '17 at 12:09

12

When you mousedown, the even fired has event.which

Taken from here: How to distinguish between left and right mouse click with jQuery

$('#element').mousedown(function(event) {
    switch (event.which) {
        case 1:
            alert('Left mouse button pressed');
            break;
        case 2:
            alert('Middle mouse button pressed');
            break;
        case 3:
            alert('Right mouse button pressed');
            break;
        default:
            alert('You have a strange mouse');
    }
});

So instead of using .click(), use mousedown and check for the cases.

edited May 23 '17 at 12:09

Community

1
1

answered Sep 08 '11 at 04:36

wesbos

25,839
30
106
143

-1 - Stephen H already referred me to that post but I said that didn't help. My question is *why* do I need to use mousedown instead of click (I already know that is a solution). – jbyrd Sep 08 '11 at 04:42
@Wes - But a "click" is a mousedown _plus_ a mouseup - even if the mouse is moved off the element and back on again in between down and up as long as there is no mouseup while it is off, so trapping just mousedown on its own is left than half of the job. There is an existing jQuery plugin for right-mouse: http://abeautifulsite.net/blog/2008/05/jquery-right-click-plugin/ – nnnnnn Sep 08 '11 at 04:43

score 8 · Accepted Answer · answered Sep 08 '11 at 04:58

8

As this article puts it:

There are no click events for right button clicks in any browser.

So you're left with mousedown and mouseup in most browsers.

answered Sep 08 '11 at 04:58

htanata

36,666
8
50
57

3

Aha, that makes sense, thanks for the article. So another way of saying it is: ***a right mouse click does not trigger a click event*** (only a mousedown and a mouseup event). – jbyrd Sep 08 '11 at 21:17
1

The article isn't quite accurate, as Firefox (and maybe IE?) will fire right click events bound on `document`. – Marc-André Lafortune Sep 03 '14 at 02:44

sabertooth1990 · Answer 3 · 2016-04-14T23:14:15.693

0

I have also tried the following code to catch right mouse click for certain class of elements

$(".brick").mousedown(function (event) {
            if (event.which === 3) {
                currentRightClickedTileID = $(this).attr("id");
            }
        });

This code doesn't always catch the right click.

edited Apr 14 '16 at 23:14

answered Oct 03 '12 at 09:31

sabertooth1990

1,048
1
13
19

score 0 · Answer 4 · answered Sep 08 '11 at 04:50

Not sure which browser(s) you've tested with, but according to MSDN the onclick fires "when the user clicks the left mouse button". I.e., by definition it doesn't occur for right (or middle) clicks. Given that's on MSDN you can expect IE to behave that way regardless of what the other browsers do.

(Onclick also fires for certain non-mouse things, like changing certain form elements with the keyboard, etc.)

I know jQuery tries to normalise behaviour between browsers, but if the browser doesn't fire the event at all...

There is at least one jQuery plugin that I know of that implements right-click: http://abeautifulsite.net/blog/2008/05/jquery-right-click-plugin/ (I haven't used it, but it looks good except that it notes that Opera doesn't support it).

Can't use jquery's click event handler to detect right click

4 Answers4

Linked