event.button

  • Revision slug: Web/API/event.button
  • Revision title: event.button
  • Revision id: 472293
  • Created:
  • Creator: Cobra
  • Is current revision? No
  • Comment

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>
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:
                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>

<button onmouseup="whichButton(event);" oncontextmenu="event.preventDefault();">Click with mouse...</button>

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

Browser compatibility

Based on Jan Wolter's JavaScript Madness: Mouse Events.

{{ CompatibilityTable() }}

Feature Gecko Webkit Internet Explorer Opera
Basic support 1 523 9 8

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

Revision Source

<p>{{ DomRef() }}</p>
<h3 id="Summary" name="Summary">Summary</h3>
<p>Indicates which mouse button caused the event.</p>
<h3 id="Syntax" name="Syntax">Syntax</h3>
<pre>
event.button
</pre>
<h3 id="Example">Example</h3>
<pre>
var buttonCode = event.button;</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 id="Example" name="Example">Example</h3>
<pre class="brush: html">
&lt;script&gt;
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:
                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;button onmouseup="whichButton(event);" oncontextmenu="event.preventDefault();"&gt;Click with mouse...&lt;/button&gt;
</pre>
<h3 id="Notes" 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 id="Specification" 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>
<h3 id="Browser_compatibility">Browser compatibility</h3>
<p>Based on Jan Wolter's <a class="external" href="http://unixpapa.com/js/mouse.html">JavaScript Madness: Mouse Events</a>.</p>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Gecko</th>
        <th>Webkit</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>1</td>
        <td>523</td>
        <td>9</td>
        <td>8</td>
      </tr>
    </tbody>
  </table>
</div>
<p>{{ languages( { "ja": "ja/DOM/event.button", "pl": "pl/DOM/event.button" ,"zh-cn": "zh-cn/DOM/event.button" } ) }}</p>
Revert to this revision