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: stackoverflow.com/questions/1206203/… — Stefan H
– Stefan H, Commented Sep 8, 2011 at 4: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
– jbyrd, Commented Sep 8, 2011 at 4:34
@Stefan H - no, I already read that post and unfortunately none of the answers deal with my question. — jbyrd
– jbyrd, Commented Sep 8, 2011 at 4:39
As a side note - there is also a syntax error in the second alert should be alert('testing!'); note missing apostrophe — megaSteve4
– megaSteve4, Commented May 28, 2013 at 12:41

Community · Accepted Answer · 2017-05-23 12:09:02Z

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, 2017 at 12:09

CommunityBot

11 silver badge

answered Sep 8, 2011 at 4:36

wesbos

26.4k31 gold badges109 silver badges144 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

jbyrd Over a year ago

-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).

nnnnnn Over a year ago

@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: abeautifulsite.net/blog/2008/05/jquery-right-click-plugin

htanata · Accepted Answer · 2011-09-08 04:58:40Z

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 8, 2011 at 4:58

htanata

37k8 gold badges52 silver badges57 bronze badges

2 Comments

jbyrd Over a year ago

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).

Marc-André Lafortune Over a year ago

The article isn't quite accurate, as Firefox (and maybe IE?) will fire right click events bound on document.

nnnnnn · Accepted Answer · 2011-09-08 04:50:43Z

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).

sabertooth1990 · Accepted Answer · 2016-04-14 23:14:15Z

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, 2016 at 23:14

answered Oct 3, 2012 at 9:31

sabertooth1990

1,0861 gold badge13 silver badges19 bronze badges

Collectives™ on Stack Overflow

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

4 Answers 4

2 Comments

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related