How to distinguish between left and right mouse click with jQuery

javascript

event-delegation

jquery-plugins

cross-browser-consistency

byAnton Shumikhin·Jan 15, 2025

Quickly discern left and right mouse clicks with jQuery. The process is simple: Listen for mousedown, and check event.which value. For a left-click, the value is 1, for a right-click it's 3. To suppress the default right-click context menu, use contextmenu.

Here’s a concise guide:

$(element).mousedown(function(event) {
    console.log(event.which === 1 ? 'Left click' : event.which === 3 ? 'Right click' : 'Bumblebee click'); // Kidding, there's no bumblebee click
}).contextmenu(function(event) {
    event.preventDefault(); // Stops the right-click menu in its tracks!
});

This code will inform you which button was clicked while stopping the right-click menu in its path.

Readying your code for all mouse button clicks

While our quick solution above is spot on, a more comprehensive solution acknowledges other mouse buttons too. You even have a default case to cover any alien mice (no, not the extraterrestrial kind).

$(element).mousedown(function(event) {
    switch (event.which) {
        case 1:
            console.log('Left click, Free coffee!'); // I wish!
            break;
        case 2:
            console.log('Middle click, Who uses this anyway?');
            break;
        case 3:
            console.log('Right click, As sinister as Dexter');
            break;
        default:
            console.log('Unhandled mouse button. Alien mouse detected!'); 
    }
}).contextmenu(function(event) {
    event.preventDefault(); // Call off the default right-click menu, It's off duty!
});

Adapting to dynamic web elements

So what if your clickable elements are late to the party? You'd bind the event to these elements as they arrive using .on() like so:

$(document).on('mousedown', 'yourSelector', function(event) {
    // The event handling extravaganza goes right here!
});

Mastering the right-click function

The contextmenu event lets you ace the right-click function. Let's replace the default context menu (this time without any feigned grudge):

$(element).contextmenu(function(event) {
    event.preventDefault(); // The default menu's gotta go!
    // Your custom menu formation logic here
    displayCustomContextMenu(event.pageX, event.pageY);
});

Here, displayCustomContextMenu is the star function that presents a menu at the mouse coordinates, event.pageX and event.pageY.

Advanced tricks for a savvy mouse handler

Let's extend the discussion and delve deeper for additional situations:

Crafting custom plugins for right-click conduct

For complex or reusable situations, wrap the right-click functionality into a custom jQuery plugin. Encapsulation for the win!

Appreciating performance with event delegation

With a common parent, strive for a high-performance setup through event delegation. Say goodbye to pesky event listeners crowding your clickable elements.

Catering to differing interaction styles

contextmenu event caters to not only right click but also context menu keyboard key. Ensure user accessibility by accounting for various interaction styles.