mozilla

Revision 17643 of Event.button

  • Revision slug: DOM/event.button
  • Revision title: event.button
  • Revision id: 17643
  • Created:
  • Creator: Sheppy
  • Is current revision? No
  • Comment clean up; 28 words added, 12 words removed

Revision Content

{{ DomRef() }}

Summary

Indicates which mouse button caused the event.

Syntax

event.button

Example

var buttonCode = event.button;

This property returns an integer value indicating the button that changed state.

  • 0 for standard "click;" this is usually usually the left button.
  • 1 for middle button; this is usually a click on the scroll wheel's button.
  • 2 for right button; this is usually a right-click.
Note: This convention is not followed in Internet Explorer: see QuirksMode for details.

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 onmouseup="whichButton(event);" oncontextmenu="event.preventDefault();">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

{{ languages( { "ja": "ja/DOM/event.button", "pl": "pl/DOM/event.button" } ) }}

Revision Source

<p>{{ DomRef() }}</p>
<h3 name="Summary">Summary</h3>
<p>Indicates which mouse button caused the event.</p>
<h3 name="Syntax">Syntax</h3>
<pre>event.button
</pre>
<h3>Example</h3>
<pre><span class="Apple-style-span" style="font-family: 'Courier New', 'Andale Mono', monospace; font-size: 14px; white-space: pre; font-weight: normal; line-height: normal; ">var buttonCode = event.button;</span></pre>
<p>This property returns an integer value indicating the button that changed state.</p>
<ul> <li>0 for standard "click;" this is usually usually the left button.</li> <li>1 for middle button; this is usually a click on the scroll wheel's button.</li> <li>2 for right button; this is usually a right-click.</li>
</ul>
<div class="note"><strong>Note:</strong> This convention is not followed in Internet Explorer: see <a class="external" href="http://www.quirksmode.org/js/events_properties.html#button" title="http://www.quirksmode.org/js/events_properties.html#button">QuirksMode for details</a>.</div>
<p>The order of buttons may be different depending on how the pointing device has been configured.</p>
<h3 name="Example">Example</h3>
<pre class="brush: html">&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 onmouseup="whichButton(event);" oncontextmenu="event.preventDefault();"&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>
<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>
<p>{{ languages( { "ja": "ja/DOM/event.button", "pl": "pl/DOM/event.button" } ) }}</p>
Revert to this revision