The mouse buttons properties determine which mouse button was pressed once a mouse event occurs. It is a read only property that is to be used with onmousedown or onmouseup events.

The mouse events have following properties:

These properties may return a number based on the mouse button pressed when the mouse event was triggered. The values returned for the button press varied from browser to browser in earlier version, but have standardized since.

The button property

Syntax for button property

event.button;

Below given values are reversed for left hand configured mouse. This is a DOM level 2 introduced property.

Returned values for button property are:

  • 0 – Left mouse button
  • 1 – Middle/wheel button
  • 2 – Right mouse button

IE 8 and earlier versions returned these values:

  • 1 – Left mouse button
  • 2 – Middle/wheel button
  • 4 – Right mouse button

The buttons property

Syntax for buttons property

event.buttons;

Below given values are reversed for left hand configured mouse. This is a DOM level 3 introduced property. When more than one mouse button is pressed, it returns a combined value (example: left button (1) + right button (2) combined, returns a value 3).

Returned values for buttons property are:

  • 1 – Left mouse button
  • 2 – Right mouse button
  • 4 – Middle/wheel button
  • 8 – Browser back button
  • 16 – Browser forward button

The which property

Syntax for which property

Below given values are reversed for left hand configured mouse. This is a DOM level 2 introduced property. It is same as button property except it is increment by ‘1’.

Returned values for which property are:

  • 0 – No button
  • 1 - left mouse button
  • 2 – Middle/wheel button
  • 3 – Right mouse button

Example of mouse event properties 'button' and 'which'

 

›› go to examples ››