mozilla

Revision 542779 of Event.button

  • Revision slug: Web/API/event.button
  • Revision title: event.button
  • Revision id: 542779
  • Created:
  • Creator: LouisLazaris
  • Is current revision? No
  • Comment some grammar fixes and added info for left-handed mouse

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 the left button for a right-handed mouse and right button for a left-handed mouse.
  • 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 on a right-handed mouse and left-click on a left-handed mouse.
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_2">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 the left button for a right-handed mouse and right button for a left-handed mouse.</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 on a right-handed mouse and left-click on a left-handed mouse.</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