1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
|
---
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"><p>Click anywhere with one or more mouse buttons.</p>
<p id="log">buttons: </p></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>
|
