---
title: MouseEvent.buttons
slug: Web/API/MouseEvent/buttons
translation_of: Web/API/MouseEvent/buttons
---
<div>{{APIRef("DOM Events")}}</div>

<p><span class="seoSummary">The<strong> <code>MouseEvent.buttons</code></strong> read-only property indicates which buttons are pressed on the mouse (or other input device) when a mouse event is triggered.</span></p>

<p>Each button that can be pressed is represented by a given number (see below). If more than one button is pressed, the button values are added together to produce a new number. For example, if the secondary (<code>2</code>) and auxilary (<code>4</code>) buttons are pressed simultaneously, the value is <code>6</code> (i.e., <code>2 + 4</code>).</p>

<div class="note">
<p><strong>Note:</strong> Do not confuse this property with the {{domxref("MouseEvent.button")}} property. The {{domxref("MouseEvent.buttons")}} property indicates the state of buttons pressed during any kind of mouse event, while the {{domxref("MouseEvent.button")}} property only guarantees the correct value for mouse events caused by pressing or releasing one or multiple buttons.</p>
</div>

<h2 id="Syntax">Syntax</h2>

<pre class="syntaxbox">var <em>buttonsPressed</em> = <em>instanceOfMouseEvent</em>.buttons
</pre>

<h3 id="Return_value">Return value</h3>

<p>A number representing one or more buttons. For more than one button pressed simultaneously, the values are combined (e.g., <code>3</code> is primary + secondary).</p>

<ul>
 <li><code>0 </code> : No button or un-initialized</li>
 <li><code>1 </code> : Primary button (usually the left button)</li>
 <li><code>2 </code> : Secondary button (usually the right button)</li>
 <li><code>4 </code> : Auxiliary button (usually the mouse wheel button or middle button)</li>
 <li><code>8 </code> : 4th button (typically the "Browser Back" button)</li>
 <li><code>16</code> : 5th button (typically the "Browser Forward" button)</li>
</ul>

<h2 id="Example">Example</h2>

<p>This example logs the <code>buttons</code> property when you trigger a {{Event("mousedown")}} event.</p>

<h3 id="HTML">HTML</h3>

<pre class="brush: html">&lt;p&gt;Click anywhere with one or more mouse buttons.&lt;/p&gt;
&lt;p id="log"&gt;buttons: &lt;/p&gt;</pre>

<h3 id="JavaScript">JavaScript</h3>

<pre class="brush: js">let button = document.querySelector('#button');
let log = document.createTextNode('?');
document.addEventListener('mousedown', logButtons);

function logButtons(e) {
  log.data = `${e.buttons} (mousedown)`;
}
document.addEventListener('mouseup', unpress);
function unpress(e) {
  log.data = `${e.buttons} (mouseup)`
}
document.querySelector('#log').appendChild(log)</pre>

<h3 id="Result">Result</h3>

<p>{{EmbedLiveSample("Example")}}</p>

<h2 id="Specifications">Specifications</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','#widl-MouseEvent-buttons','MouseEvent.buttons')}}</td>
   <td>{{Spec2('DOM3 Events')}}</td>
   <td>Initial definition</td>
  </tr>
 </tbody>
</table>

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



<p>{{Compat("api.MouseEvent.buttons")}}</p>

<h3 id="Firefox_notes">Firefox notes</h3>

<p>Firefox supports the <code>buttons</code> attribute on Windows, Linux (GTK), and macOS with the following restrictions:</p>

<ul>
 <li>Utilities allow customization of button actions. Therefore, <em>primary</em> might not be the the left button on the device, <em>secondary</em> might not be the right button, and so on. Moreover, the middle (wheel) button, 4th button, and 5th button might not be assigned a value, even when they are pressed.</li>
 <li>Single-button devices may emulate additional buttons with combinations of button and keyboard presses.</li>
 <li>Touch devices may emulate buttons with configurable gestures (e.g., one-finger touch for <em>primary</em>, two-finger touch for <em>secondary</em>, etc.).</li>
 <li>On Linux (GTK), the 4th button and the 5th button are not supported. In addition, a {{Event("mouseup")}} event always includes the releasing button information in the <code>buttons</code> value.</li>
 <li>On Mac OS X 10.5, the <code>buttons</code> attribute always returns <code>0</code> because there is no platform API for implementing this feature.</li>
</ul>

<h2 id="See_also">See also</h2>

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