From a408195e523381b4760b60b8f374c91a287a08ef Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sat, 1 Jan 2022 00:55:19 +0900 Subject: 2021/12/01 時点の英語版に同期 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/api/mouseevent/buttons/index.md | 128 +++++++++++++-------------- 1 file changed, 60 insertions(+), 68 deletions(-) (limited to 'files') diff --git a/files/ja/web/api/mouseevent/buttons/index.md b/files/ja/web/api/mouseevent/buttons/index.md index 1854c11fda..c74337a618 100644 --- a/files/ja/web/api/mouseevent/buttons/index.md +++ b/files/ja/web/api/mouseevent/buttons/index.md @@ -1,101 +1,93 @@ --- title: MouseEvent.buttons slug: Web/API/MouseEvent/buttons +tags: + - API + - DOM + - DOM イベント + - プロパティ + - 読み取り専用 + - リファレンス + - UIEvent +browser-compat: api.MouseEvent.buttons translation_of: Web/API/MouseEvent/buttons --- -
{{APIRef("DOM Events")}}
+{{APIRef("DOM Events")}} -

The MouseEvent.buttons read-only property indicates which buttons are pressed on the mouse (or other input device) when a mouse event is triggered.

+**`MouseEvent.buttons`** は読み取り専用のプロパティで、マウスイベントが発行されたときにマウス（またはその他の入力機器）のどのボタンが押されていたかを示します。 -

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 (2) and auxilary (4) buttons are pressed simultaneously, the value is 6 (i.e., 2 + 4).

+押されている可能性があるそれぞれのボタンは、数字で表されます（下図参照）。 +複数のボタンが押された場合は、ボタンの値を足し合わせて新しい数値が生成されます。 +例えば、副ボタン（`2`）と補助ボタン（`4`）を同時に押した場合、その値は`6`（すなわち、`2 + 4`）となります。 -
-

Note: 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.

-
+> **Note:** このプロパティを {{domxref("MouseEvent.button")}} プロパティと混同しないでください。 +> {{domxref("MouseEvent.buttons")}} プロパティはあらゆる種類のマウスイベントの際に押されていたボタンの状態を示すのに対して、 +> {{domxref("MouseEvent.button")}} プロパティは 1 つまたは複数のボタンを押したか離したことによって引き起こされたマウスイベントのみ、正しい値を保証します。 -

Syntax

+## 値 -
var buttonsPressed = instanceOfMouseEvent.buttons
-
+1 つまたは複数のボタンを表す数値です。 +複数のボタンが同時に押されていた場合、値が組み合わされます（例えば、 `3` は主ボタン＋副ボタンです）。 -

Return value

+- `0`: ボタンが押されていない、または初期化されていない +- `1`: 主ボタン (通常は左ボタン) +- `2`: 副ボタン (通常は右ボタン) +- `4`: 補助ボタン (通常はマウスホイールボタンまたは中央ボタン) +- `8`: 第四ボタン (通常は「ブラウザーで戻る」ボタン) +- `16` : 第五ボタン (通常は「ブラウザーで進む」ボタン) -

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

+## 例 - +この例では、 {{domxref("Element/mousedown_event", "mousedown")}} イベントを発行したときに `buttons` プロパティを記録します。 -

Example

+### HTML -

This example logs the buttons property when you trigger a {{Event("mousedown")}} event.

+```html +

1 つまたは複数のボタンでどこかをクリックしてください

+
buttons:
+``` -

HTML

+### JavaScript -
<p>Click anywhere with one or more mouse buttons.</p>
-<p id="log">buttons: </p>
- -

JavaScript

- -
let button = document.querySelector('#button');
-let log = document.createTextNode('?');
-document.addEventListener('mousedown', logButtons);
+```js
+let log = document.createTextNode('?');   // let log = new Text('?');
 
 function logButtons(e) {
-  log.data = `${e.buttons} (mousedown)`;
+  log.data = `${e.buttons} (${e.type})`;  // log.nodeValue= `${e.buttons} (${e.type})`;
 }
-document.addEventListener('mouseup', unpress);
-function unpress(e) {
-  log.data = `${e.buttons} (mouseup)`
-}
-document.querySelector('#log').appendChild(log)
-

Result

+document.addEventListener('mouseup', logButtons); +document.addEventListener('mousedown', logButtons); +// document.addEventListener('mousemove', logButtons); -

{{EmbedLiveSample("Example")}}

+document.querySelector('#log').appendChild(log) +``` -

Specifications

+### 結果 - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('DOM3 Events','#widl-MouseEvent-buttons','MouseEvent.buttons')}}{{Spec2('DOM3 Events')}}Initial definition
+{{EmbedLiveSample("Example")}} -

Browser compatibility

+## 仕様書 +{{Specifications}} +## ブラウザーの互換性 -

{{Compat("api.MouseEvent.buttons")}}

+{{Compat}} -

Firefox notes

+### Firefox のメモ -

Firefox supports the buttons attribute on Windows, Linux (GTK), and macOS with the following restrictions:

+Firefox は `buttons` 属性に Windows, Linux (GTK), macOS で対応していますが、以下の制限があります。 - +- ユーティリティで、ボタン操作のカスタマイズをすることができます。 + したがって、*主ボタン*は機器の左ボタンではない、*副ボタン*は右ボタンではない、などということもありえます。 + また、中（ホイール）ボタン、第四ボタン、第五ボタンは、押されても値が割り当てられないかもしれません。 +- 単一ボタンの機器では、ボタンとキーボードの押下の組み合わせで追加のボタンをエミュレートすることができます。 +- タッチ機器では、設定可能なジェスチャー（例えば、 1 本指タッチで「主ボタン」、2 本指タッチで「副ボタン」等）でボタンをエミュレートすることができます。 +- Linux (GTK) では、第四ボタンと第五ボタンには対応していません。 + 加えて {{domxref("Element/mouseup_event", "mouseup")}} イベントでは、常に `buttons` の値に離したボタンの情報を含みます。 +- Mac OS X 10.5 では、 `buttons` 属性は常に `0` を返します。プラットフォームの API がこの機能を実装していないからです。 -

See also

+## 関連情報 - +- {{domxref("MouseEvent")}} -- cgit v1.2.3-54-g00ecf