Revision 722295 of MouseEvent.which

Revision slug: Web/API/MouseEvent.which
Revision title: MouseEvent.which
Revision id: 722295
Created: Jan 14, 2015, 5:04:36 AM
Creator: teoli
Is current revision? No
Comment +non-standard

Tags:

Revision Content

The MouseEvent.which read-only property indicates which button was pressed on the mouse to trigger the event.

Syntax

var buttonPressed = instanceOfMouseEvent.which

Return value

A number representing a given button:

0: No button
1: Left button
2: Middle button (if present)
3: Right button

For a mouse configured for left-handed use, the button actions are reversed. In this case, the values are read from right to left.

Specification

Specification	Status	Comment
{{SpecName('DOM3 Events','#events-mouseevents','MouseEvent.which')}}	{{Spec2('DOM3 Events')}}	No change from {{SpecName('DOM2 Events')}}
{{SpecName('DOM2 Events','#Events-MouseEvent','MouseEvent.which')}}	{{Spec2('DOM2 Events')}}	Initial definition.

Browser compatibility

Feature	Firefox (Gecko)	Chrome	Internet Explorer	Opera	Safari
Basic support	{{CompatGeckoDesktop(1)}} [1]	1.0	9.0	5.0	1.0

Feature	Firefox Mobile (Gecko)	Android	IE Mobile	Opera Mobile	Safari Mobile
Basic support	{{ CompatGeckoMobile(1) }} [1]	{{ CompatVersionUnknown() }}	{{ CompatVersionUnknown() }}	{{ CompatVersionUnknown() }}	{{ CompatVersionUnknown() }}

[1] On {{event("mousemove")}} events, the which property is incorrectly always set to 1 {{bug(1048294)}}.

Revision Source

<p>{{APIRef}}{{Non-standard_header}}</p>

<p>The <strong><code>MouseEvent.which</code></strong> read-only property indicates which button was pressed on the mouse to trigger the event.</p>

<h2 id="Syntax" style="line-height: 30px;">Syntax</h2>

<pre class="syntaxbox" style="font-size: 14px;">
var <em>buttonPressed</em> = <em>instanceOfMouseEvent</em>.which
</pre>

<h3 id="Return_value" style="line-height: 30px;">Return value</h3>

<p>A number representing a given button:</p>

<ul>
 <li><code>0</code>:&nbsp;No button</li>
 <li><code>1</code>: Left button</li>
 <li><code>2</code>: Middle button (if present)</li>
 <li><code>3</code>: Right button</li>
</ul>

<p>For a mouse configured for left-handed use, the button actions are reversed. In this case, the values are read from right to left.</p>

<h2 id="Specification" style="line-height: 30px;">Specification</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
  <tr>
   <td>{{SpecName('DOM3 Events','#events-mouseevents','MouseEvent.which')}}</td>
   <td>{{Spec2('DOM3 Events')}}</td>
   <td>No change from {{SpecName('DOM2 Events')}}</td>
  </tr>
  <tr>
   <td>{{SpecName('DOM2 Events','#Events-MouseEvent','MouseEvent.which')}}</td>
   <td>{{Spec2('DOM2 Events')}}</td>
   <td>Initial definition.</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2>

<p>{{ CompatibilityTable() }}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Firefox (Gecko)</th>
   <th>Chrome</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatGeckoDesktop(1)}} [1]</td>
   <td>1.0</td>
   <td>9.0</td>
   <td>5.0</td>
   <td>1.0</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>Android</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{ CompatGeckoMobile(1) }} [1]</td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>{{ CompatVersionUnknown() }}</td>
  </tr>
 </tbody>
</table>
</div>

<p name="See_also" style="line-height: 30px;">[1] On {{event("mousemove")}} events, the <code>which</code> property is incorrectly always set to <code>1</code> {{bug(1048294)}}.</p>

<h2 id="See_also" name="See_also" style="line-height: 30px;">See also</h2>

<ul>
 <li>{{ domxref("MouseEvent") }}</li>
</ul>

Revert to this revision