How to respond to mouse button clicks in Javascript?

Question

I want to be able to write code to respond (seperately) to the following events:

1. Right hand click
2. Left hand click
3. Middle button click (optional - nice to have but I can live without this).

Is there an inbuilt way in Javascript that I can respond to these events, or do I need to use a library (preferably jQuery) ?

Answer 1

$('#your_element').mousedown(function(event) {
    switch (event.which)
    {
        case 1:
            // left mouse
            break;
        case 2:
            // middle mouse
            break;
        case 3:
            // right mouse
            break;
        default:
            // some sort of bizarre mouse! fallback
            break;
    }
});

Answer 2

Quirks mode has a decent guide, it is more complicated then it needs to be due to browser differences.

do I need to use a library (preferably jQuery) ?

JavaScript libraries can't do anything that you can't do yourself; they just make it easier to do some things.

Answer 3

Here's the function I use:

var ieButtons = { "1": "left", "2": "right", "3": "leftright", "4": "middle" };

function getMouseButton(evt) {
    if (typeof evt.which == "number") {
        // Non-IE case. Works in everything apart from Opera < 8
        return (evt.which < 2) ? "left" :
            ( (evt.which == 2) ? "middle" : "right" );
    } else {
        // IE case
        return ieButtons[evt.button] || "unknown";
    }
}

document.onmousedown = function(evt) {
    evt = evt || window.event;
    window.alert( getMouseButton(evt) );
};

Jan Wolter's article on mouse events is seemingly less well-known than his one on key events but is just as good, and knocks quirksmode into a cocked hat: http://unixpapa.com/js/mouse.html

Having just looked at the jQuery code, it looks as though it normalizes the which property of the event correctly (1 for left, 2 for middle, 3 for right), although without IE's nice feature of reporting multiple simultaneous button presses.

Answer 4

from MSDN: onclick event from MSDN: button property