Javascript DOM MouseEvent buttons Property

Introduction

Find out which mouse button(s) that was pressed when a mouse event was triggered:

The return values are combined if you press two buttons at once.

The buttons property is not supported Safari.

View in separate window 

<!DOCTYPE html>
<html>
<body>

<div onmousedown="WhichButton(event)">Click this text with one of your mouse buttons to return a number.
</div>//  w  ww  .ja v a2 s .c om
<h2>You pressed button: <span id="demo"></span></h2>
<script>
function WhichButton(event) {
  var x = event.buttons;
  document.getElementById("demo").innerHTML = x;
}
</script>

</body>
</html>

The buttons property returns a number that indicates which mouse button or mouse buttons were pressed when a mouse event was triggered.

This property is mostly used together with the onmousedown event.

This property is read-only.

If more than one button is pressed, the values are combined to produce a new number

If the left button (1) and the right button (2) are pressed, the returned value is 1+2, which is 3.

Possible values:

  • 1 : Left mouse button
  • 2 : Right mouse button
  • 4 : Wheel button or middle button
  • 8 : Fourth mouse button
  • 16 : Fifth mouse button



PreviousNext

Related