From 40590735d2a90134f5ee0bb868cac1d00126e1ed Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sat, 1 Jan 2022 00:33:01 +0900 Subject: 2021/11/05 時点の英語版に同期 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/api/mouseevent/button/index.md | 126 ++++++++++++---------------- 1 file changed, 53 insertions(+), 73 deletions(-) (limited to 'files') diff --git a/files/ja/web/api/mouseevent/button/index.md b/files/ja/web/api/mouseevent/button/index.md index 71aab88fe7..8713bbcbe7 100644 --- a/files/ja/web/api/mouseevent/button/index.md +++ b/files/ja/web/api/mouseevent/button/index.md @@ -4,57 +4,53 @@ slug: Web/API/MouseEvent/button tags: - API - DOM - - DOM Events + - DOM イベント - MouseEvent - - Property - - Read-only - - Reference + - プロパティ + - 読み取り専用 + - リファレンス +browser-compat: api.MouseEvent.button translation_of: Web/API/MouseEvent/button --- -

{{APIRef("DOM Events")}}

+{{APIRef("DOM Events")}} -

読み取り専用プロパティ MouseEvent.button はイベントのトリガーとなったのがどのボタンが押されたのかを表します。

+**`MouseEvent.button`** は読み取り専用のプロパティで、イベントを引き起こすのにどのボタンが押されたのかを表します。 -

このプロパティは、1つまたは複数のボタンを押したり離したりすることによって発生したイベント中にどのボタンが押されたかを示すことのみを保証します。したがって、 {{event("mouseenter")}}, {{event("mouseleave")}}, {{event("mouseover")}}, {{event("mouseout")}} ,{{event("mousemove")}} のようなイベントに対しては確かではありません。

+このプロパティは、 1 つまたは複数のボタンを押したり離したりすることによって発生したイベント中に、どのボタンが押されたかを示すことのみを保証します。 +したがって、 {{domxref("Element/mouseenter_event", "mouseenter")}}, {{domxref("Element/mouseleave_event", "mouseleave")}}, {{domxref("Element/mouseover_event", "mouseover")}}, {{domxref("Element/mouseout_event", "mouseout")}}, {{domxref("Element/mousemove_event", "mousemove")}} のようなイベントに対しては確かではありません。 -

ユーザーはポインティングデバイスの設定を変更できるため、例えばイベントのボタンプロパティがゼロだった場合、必ずしも物理的な左ボタンによるものとは限りません。ただし、そのような場合でも標準設定における左ボタンと同じ動作をするべきです。

+ユーザーはポインティングデバイスの設定を変更できるため、例えばイベントのボタンプロパティがゼロだった場合、必ずしも物理的な左ボタンによるものとは限りません。ただし、そのような場合でも標準設定における左ボタンと同じ動作をするべきです。 -
-

Note: 全てのマウスイベントで扱える、複数のボタンを同時に押下されていることを表せる {{domxref("MouseEvent.buttons")}} プロパティと混同しないように注意してください。

-
+> **Note:** {{domxref("MouseEvent.buttons")}} プロパティと混同しないように注意してください。こちらはすべての種類のマウスイベントで、ボタンの押下状態を示します。 -

構文

+## 値 -
var buttonPressed = instanceOfMouseEvent.button
-
+該当するボタンに対応する番号です。 -

戻り値

+- `0`: 主ボタンが押された。通常は左ボタンか初期化されていない状態。 +- `1`: 補助ボタンが押された。通常はホイールボタンまたは中央のボタンが押された場合。 +- `2`: 副ボタンが押された。通常は右ボタン。 +- `3`: 第四ボタン。一般的にブラウザーの戻るボタン。 +- `4`: 第五ボタン。一般的にブラウザーの進むボタン。 -

該当するボタンに対応する番号:

+上記のように、ボタンは標準の「左から右へ」のレイアウトとは異なる構成でも構いません。 +左利き用に設定されたマウスでは、ボタンの動作が逆になることがあります。 +ポインティングデバイスによっては 1 つのボタンしか持たず、キーボードまたは他の入力機構を使用して主、副、補助などを示します。 +他のポインティングデバイスは多くのボタンを異なる機能およびボタン値にマッピングすることができます。 - +## 例 -

上記のように、ボタンは標準の「左から右へ」のレイアウトとは異なるように構成されてもよいく、左利き用に設定されたマウスでは、ボタンの動作が逆になることがあります。いくつかのポインティングデバイスは１つのボタンしか持たず、キーボードまたは他の入力機構を使用して主、副、補助などを示します。他のポインティングデバイスは多くのボタンを異なる機能およびボタン値にマッピングすることができます。

+### HTML -

例

+```html + +

+``` -

 

+### JavaScript -

HTML

- -
<button id="button" oncontextmenu="event.preventDefault();">Click here with your mouse...</button>
-<p id="log"></p>
-
- -

JavaScript

- -
let button = document.querySelector('#button');
+```js
+let button = document.querySelector('#button');
 let log = document.querySelector('#log');
 button.addEventListener('mouseup', logMouseButton);
 
@@ -62,49 +58,33 @@ function logMouseButton(e) {
   if (typeof e === 'object') {
     switch (e.button) {
       case 0:
-        log.textContent = 'Left button clicked.';
+        log.textContent = '左ボタンがクリックされました。';
         break;
       case 1:
-        log.textContent = 'Middle button clicked.';
+        log.textContent = '中央ボタンがクリックされました。';
         break;
       case 2:
-        log.textContent = 'Right button clicked.';
+        log.textContent = '右ボタンがクリックされました。';
         break;
       default:
-        log.textContent = `Unknown button code: ${btnCode}`;
+        log.textContent = `不明なボタンコード: ${e.button}`;
     }
   }
-}
-
- -

仕様

- - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('DOM3 Events','#widl-MouseEvent-button','MouseEvent.button')}}{{Spec2('DOM3 Events')}}Compared to {{SpecName('DOM2 Events')}}, the return value can be negative.
{{SpecName('DOM2 Events','#Events-MouseEvent','MouseEvent.button')}}{{Spec2('DOM2 Events')}}Initial definition.
- -

ブラウザ実装状況

- -
{{Compat("api.MouseEvent.button")}}
- -

関連情報

- - +} +``` + +### 結果 + +{{EmbedLiveSample("Example")}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{domxref("MouseEvent")}} -- cgit v1.2.3-54-g00ecf