In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > event handling > properties > button (event)

button property (event)

Browser support:

Sets or retrieves the mouse button(s) that were pressed at the time when the current event was fired.

The button property is set for onmousedown and onmouseup events in all browsers.
In Internet Explorer, the button property can also be used in case of onmousemove and onmousewheel events.
Google Chrome and Safari support the button property for onmousemove, onmouseout and onmouseover events, but the default value of this property is 0, so the left mouse button is not detectable in case of these events.

Note that Internet Explorer from version 9 started to support different event objects similarly to Firefox, Opera, Google Chrome and Safari.
The event object passed to an event handler and the event object referred to by the window.event property are different in Internet Explorer from version 9 (except if the event handler is registered with the attachEvent method).
The window.event object works the same as in previous versions, it supports the button property for the onmousedown, onmouseup, onmousemove and onmousewheel events.
The event object associated with mouse events (MouseEvent) only supports the button property for the onmousedown and onmouseup events, for other mouse-related events (onmousemove, onmousewheel, etc.), the value of the button property is always zero.
The possible values of the button property are also different for the window.event and MouseEvent objects (see the 'Possible values' section below).

Note: by default, the right click is disabled for JavaScript in Opera. The user can manually enable it (Tools - Preferences - Advanced - Content - JavaScript Options - Allow script to receive right clicks).

If you need to detect whether the ALT, CONTROL, META or SHIFT key was down at the time when the event occurred, use the altKey, ctrlKey, metaKey or shiftKey property.

Syntax:

object.button;

You can find the related objects in the Supported by objects section below.

The button property is read-only, except if the event object is created with the createEventObject method when it is read/write.

Possible values:

Integer that sets or retrieves the pressed mouse button(s).

One of the following values:

window.event: No button is pressed.
MouseEvent: Left button is pressed.

window.event: Left button is pressed.
MouseEvent: Middle button is pressed.

Right button is pressed.

window.event: Left and right buttons are pressed.

window.event: Middle button is pressed.

window.event: Left and middle buttons are pressed.

window.event: Right and middle buttons are pressed.

window.event: All three buttons are pressed.

Default: 0.

The which property is similar to the button property for MouseEvent objects. Since the possible values of the button property and their meanings are different in browsers, the simplest solution to detect the pressed mouse buttons is to use the which property where it is supported and the button property in other cases. See the example below for details.

Example HTML code 1:

This example illustrates the use of the button and which properties:

<head>
    <script type="text/javascript">
        function WhichButton (event) {
                // all browsers except IE before version 9
            if ('which' in event) {
                switch (event.which) {
                case 1:
                    alert ("Left button is pressed");
                    break;
                case 2:
                    alert ("Middle button is pressed");
                    break;
                case 3:
                    alert ("Right button is pressed");
                    break;
                }
            }
            else {
                    // Internet Explorer before version 9
                if ('button' in event) {
                    var buttons = "";
                    if (event.button & 1) {
                        buttons += "left";
                    }
                    if (event.button & 2) {
                        if (buttons == "") {
                            buttons += "right";
                        }
                        else {
                            buttons += " + right";
                        }
                    }
                    if (event.button & 4) {
                        if (buttons == "") {
                            buttons += "middle";
                        }
                        else {
                            buttons += " + middle";
                        }
                    }
                    alert ("The following buttons are pressed: " + buttons);
                }
            }
        }
    </script>
</head>
<body>
    <div onmousedown="WhichButton (event);">Press a mouse button over this text!</div>
</body>