mozilla

Revision 17636 of Event.button

  • Revision slug: DOM/event.button
  • Revision title: event.button
  • Revision id: 17636
  • Created:
  • Creator: RobG
  • Is current revision? No
  • Comment /* Syntax */

Revision Content

Summary

Indicates which mouse button caused the event.

Syntax

var buttonCode = event.button;

Returns an integer value indicating the button that changed state.

  • 0 for standard 'click', usually left button
  • 1 for middle button, usually wheel-click
  • 2 for right button, usually right-click

The order of buttons may be different depending on how the pointing device has been configured.

Example

<script type="text/javascript">

function whichButton(e)
{
  // Handle different event models
  var e = e || window.event;
  var btnCode;

  if ('object' == typeof e){
    btnCode = e.button;

    switch (btnCode){
      case 0  : alert('Left button clicked');
                break;
      case 1  : alert('Middle button clicked');
                break;
      case 2  : alert('Right button clicked');
                break;
      default : alert('Unexpected code: ' + btnCode);
    }
  }
}

</script>

<p onclick="whichButton(event);">Click with mouse...</p>

Notes

Because mouse clicks are frequently intercepted by the user interface, it may be difficult to detect buttons other than those for a standard mouse click (usually the left button) in some circumstances.

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.


Specification

DOM 2 Events Specification: button

Revision Source

<h3 name="Summary"> Summary </h3>
<p>Indicates which mouse button caused the event.
</p>
<h3 name="Syntax"> Syntax </h3>
<pre>var buttonCode = event.button;
</pre>
<p>Returns an integer value indicating the button that changed state.
</p>
<ul><li> 0 for standard 'click', usually left button
</li><li> 1 for middle button, usually wheel-click
</li><li> 2 for right button, usually right-click
</li></ul>
<p>The order of buttons may be different depending on how the pointing device has been configured.
</p>
<h3 name="Example"> Example </h3>
<pre>&lt;script type="text/javascript"&gt;

function whichButton(e)
{
  // Handle different event models
  var e = e || window.event;
  var btnCode;

  if ('object' == typeof e){
    btnCode = e.button;

    switch (btnCode){
      case 0  : alert('Left button clicked');
                break;
      case 1  : alert('Middle button clicked');
                break;
      case 2  : alert('Right button clicked');
                break;
      default : alert('Unexpected code: ' + btnCode);
    }
  }
}

&lt;/script&gt;

&lt;p onclick="whichButton(event);"&gt;Click with mouse...&lt;/p&gt;

</pre>
<h3 name="Notes"> Notes </h3>
<p>Because mouse clicks are frequently intercepted by the user interface, it may be difficult to detect buttons other than those for a standard mouse click (usually the left button) in some circumstances.
</p><p>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.
</p><p><br>
</p>
<h3 name="Specification"> Specification </h3>
<p>DOM 2 Events Specification: <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-MouseEvent-button">button</a>
</p>
Revert to this revision