diff options
Diffstat (limited to 'files/ja/web/api/mouseevent/buttons/index.md')
| -rw-r--r-- | files/ja/web/api/mouseevent/buttons/index.md | 101 |
1 files changed, 101 insertions, 0 deletions
diff --git a/files/ja/web/api/mouseevent/buttons/index.md b/files/ja/web/api/mouseevent/buttons/index.md new file mode 100644 index 0000000000..1854c11fda --- /dev/null +++ b/files/ja/web/api/mouseevent/buttons/index.md @@ -0,0 +1,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> |