MouseEvent.button
The MouseEvent.button
read-only property indicates which button was pressed on the mouse to trigger the event.
This property only guarantees to indicate which buttons are pressed during events caused by pressing or releasing one or multiple buttons. As such, it is not reliable for events such as mouseenter
, mouseleave
, mouseover
, mouseout
or mousemove
.
Users may change the configuration of buttons on their pointing device so that if an event's button property is zero, it may not have been caused by the button that is physically left–most on the pointing device; however, it should behave as if the left button was clicked in the standard button layout.
Note: Do not confuse this property with the MouseEvent.buttons
property, which indicates which buttons are pressed for all mouse events types.
Syntax
var buttonPressed = instanceOfMouseEvent.button
Return value
A number representing a given button:
0
: Main button pressed, usually the left button or the un-initialized state1
: Auxiliary button pressed, usually the wheel button or the middle button (if present)2
: Secondary button pressed, usually the right button3
: Fourth button, typically the Browser Back button4
: Fifth button, typically the Browser Forward button
For a mouse configured for left-handed use, the button actions are reversed. In this case, the values are read from right to left.
Example
<script> var whichButton = function (e) { // Handle different event models var e = e || window.event; var btnCode; if ('object' === typeof e) { btnCode = e.button; switch (btnCode) { case 0: console.log('Left button clicked.'); break; case 1: console.log('Middle button clicked.'); break; case 2: console.log('Right button clicked.'); break; default: console.log('Unexpected code: ' + btnCode); } } } </script> <button onmouseup="whichButton(event);" oncontextmenu="event.preventDefault();">Click with mouse...</button>
Specifications
Specification | Status | Comment |
---|---|---|
Document Object Model (DOM) Level 3 Events Specification The definition of 'MouseEvent.button' in that specification. |
Working Draft | Compared to Document Object Model (DOM) Level 2 Events Specification, the return value can be negative. |
Document Object Model (DOM) Level 2 Events Specification The definition of 'MouseEvent.button' in that specification. |
Recommendation | Initial definition. |
Browser compatibility
Feature | Firefox (Gecko) | Chrome | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | 1.0 (1.7 or earlier) | 1.0 | 9.0 [1] | (Yes) | 3.0.4 |
Feature | Firefox Mobile (Gecko) | Android | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | ? | ? | ? | ? | ? |
[1] This convention is not followed in Internet Explorer prior to version 9: see QuirksMode for details.
See also
License
© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/api/mouseevent/button