How to properly handle left and right click in Firefox

Question

I am working on a web app in which I want to have a different action happen to an element whether I left or right click on it.

So I first added a function to handle the click event with jQuery, and then added a second function to handle the oncontextmenu attribute of my element.

This is working well in Chrome & IE but causes a problem in Firefox: When I right click on an element, my function that handles the left click is surprisingly called, and then my function that handles the right click is called.

How can I make Firefox not call the left-click function when I right click?

Answer 1

Yeah, browsers traditionally send right-clicks to the onclick handler, with the event.which property set to 3 instead of 1. IE used oncontextmenu instead, then Firefox picked up oncontextmenu in addition to the usual onclick. To cater for the browsers you will have to catch both events — or find a plugin that will do it for you.

Note that even with this sorted out, you are still not guaranteed to get right click events or be able to disable the standard context menu. Because many web pages abused the ability, it is disablable in many browsers, and sometimes disabled by default (eg. in Opera). If your app provides right-click actions, always ensure there is an alternative way to bring them up.

Answer 2

My problem came from the fact that on one side I was using the insanely great jQuery live function for click and the oncontextmenu attribute on the other. (Using onclick and oncontextmenu was not a problem).

I've just modified my $.live("click"...) function by catching the event and not firing the rest when e.which is 3.

Problem solved!