9.7 Determining Which Mouse Button Was Pressed

NN 6, IE 4

9.7.1 Problem

You want your event handler function to read which mouse button or button combination was used for a click-related mouse event.

9.7.2 Solution

Both the IE and W3C DOM event models agree that the button property of the event object is the one that holds information about the button or buttons used to generate a mousedown event (button values don't always come with mouseup or click events). Unfortunately, this is where the similarity ends.

Some of the integer values associated with the button property differ between the two event models. But they do agree that a value of 2 means that the right (nondominant) mouse button was used for the event. Here is a template for an event handler function that branches into separate processing paths for the right button and all other buttons:

 function myFunction(evt) {
    evt = (evt) ? evt : ((window.event) ? event : null);
    if (evt) {
        if (typeof evt.button != "undefined") {
            if (evt.button =  = 2) {
                // process right-click here
                return false;
            } else {
                // process all other clicks here
            }
        }
    }
}

9.7.3 Discussion

The reason that the example function tests for the presence of the button property is for the sake of graceful degrading with Navigator 4, which has an entirely different property and value range for the mouse button information. The property is called which, and the value for the right button is 3. If you need to support Navigator 4, you can rework the skeletal structure in the Solution to accommodate the differences:

 function myFunction(evt) {
    evt = (evt) ? evt : ((window.event) ? event : null);
    if (evt) {
        var rightButton = false;
        if ((typeof evt.button != "undefined" && evt.button =  = 2) || 
            (evt.which && evt.which =  = 3)) {
            rightButton = true;
        }
        if (rightButton) {
            // process right-click here
            return false;
        } else {
            // process all other clicks here
        }
    }
}

Again, I cannot emphasize enough that checking for buttons is most reliably performed with mousedown events only. Values of 0 (IE) or null (NN) come from other mouse-related events.

As for all the possible values of the button property, Table 9-4 shows the possibilities, which are far more extensive in IE.

Table 9-4. Possible values of button property

Button(s)	IE 4+	NN 6+	W3C DOM
No button	0	null	null
Left (primary)	1	0	0
Middle	4	1	1
Right	2	2	2
Left + Right	3	n/a	n/a
Left + Middle	5	n/a	n/a
Right + Middle	6	n/a	n/a
Left + Middle + Right	7	n/a	n/a

If Macintosh users are in your target audience, exercise care in limiting right-click actions to nonmission critical actions. Macs traditionally have used single-button mice, although this may change in the future. While some browsers simulate the right-click when the user holds down one of the keyboard modifier keys (usually Ctrl) while pressing the mouse button, you cannot guarantee that users even know to do this. Therefore, if you intend to offer some special action with a right-click for Windows and Unix users, be sure to offer a suitable alternative for Mac users. Otherwise, change your interface to make the extra functionality available by clicking while holding down one of the modifier keys for all operating systems.

9.7.4 See Also

Recipe 9.1 for equalizing the IE and W3C DOM event objects in event handler functions.