diff options
Diffstat (limited to 'files')
| -rw-r--r-- | files/ja/web/api/mouseevent/index.md | 316 |
1 files changed, 136 insertions, 180 deletions
diff --git a/files/ja/web/api/mouseevent/index.md b/files/ja/web/api/mouseevent/index.md index 0eb9ca3791..b3763e580c 100644 --- a/files/ja/web/api/mouseevent/index.md +++ b/files/ja/web/api/mouseevent/index.md @@ -4,191 +4,147 @@ slug: Web/API/MouseEvent tags: - API - DOM - - DOM Events - - Interface - - MouseEvent - - Reference - - events - - mouse + - DOM イベント - インターフェイス + - MouseEvent + - リファレンス + - イベント + - マウス +browser-compat: api.MouseEvent translation_of: Web/API/MouseEvent --- -<div>{{APIRef("DOM Events")}}</div> - -<p><code><strong>MouseEvent</strong></code> インターフェイスは、ポインティングデバイス (マウスなど) によるユーザの対話によって発生したイベントを表します。このインターフェイスを使用する一般的なイベントとして {{event("click")}}, {{event("dblclick")}}, {{event("mouseup")}}, {{event("mousedown")}} があります。</p> - -<p><code>MouseEvent</code> は {{domxref("UIEvent")}} から派生しており、これはさらに {{domxref("Event")}} から派生しています。後方互換性のために {{domxref("MouseEvent.initMouseEvent()")}} メソッドは維持されていますが、 <code>MouseEvent</code> オブジェクトを作成する際は {{domxref("MouseEvent.MouseEvent", "MouseEvent()")}} コンストラクターを使用するべきです。</p> - -<p><code>MouseEvent</code> からは、 {{domxref("WheelEvent")}}, {{domxref("DragEvent")}} などの特定用途向けイベントが派生しています。</p> - -<p>{{InheritanceDiagram}}</p> - -<h2 id="Constructor" name="Constructor">コンストラクター</h2> - -<dl> - <dt>{{domxref("MouseEvent.MouseEvent", "MouseEvent()")}}</dt> - <dd><code>MouseEvent</code> オブジェクトを生成します。</dd> -</dl> - -<h2 id="Properties" name="Properties">プロパティ</h2> - -<p><em>このインターフェイスは、親インターフェイスである {{domxref("UIEvent")}} および {{domxref("Event")}} のプロパティも継承しています。</em></p> - -<dl> - <dt>{{domxref("MouseEvent.altKey")}} {{readonlyinline}}</dt> - <dd>マウスイベントが発生したときに <kbd>alt</kbd> キーが押下されていれば、 <code>true</code> を返します。</dd> - <dt>{{domxref("MouseEvent.button")}} {{readonlyinline}}</dt> - <dd>マウスイベントが発生したときに押下されたボタンの番号 (もしあれば) です。</dd> - <dt>{{domxref("MouseEvent.buttons")}} {{readonlyinline}} {{gecko_minversion_inline("15.0")}}</dt> - <dd>マウスイベントが発生したときに離されていたボタンの番号 (もしあれば) です。</dd> - <dt>{{domxref("MouseEvent.clientX")}} {{readonlyinline}}</dt> - <dd>ローカル (DOM content) 座標における、マウスポインターの X 座標。</dd> - <dt>{{domxref("MouseEvent.clientY")}} {{readonlyinline}}</dt> - <dd>ローカル (DOM content) 座標における、マウスポインターの Y 座標。</dd> - <dt>{{domxref("MouseEvent.ctrlKey")}} {{readonlyinline}}</dt> - <dd>マウスイベントが発生したときに <kbd>control</kbd> キーが押下されていれば、 <code>true</code> を返します。</dd> - <dt>{{domxref("MouseEvent.metaKey")}} {{readonlyinline}}</dt> - <dd>マウスイベントが発生したときに <kbd>meta</kbd> キーが押下されていれば、 <code>true</code> を返します。</dd> - <dt>{{domxref("MouseEvent.movementX")}} {{readonlyinline}}</dt> - <dd>前の {{event("mousemove")}} イベントの位置に対して相対的な、マウスポインタの X 座標。</dd> - <dt>{{domxref("MouseEvent.movementY")}} {{readonlyinline}}</dt> - <dd>前の {{event("mousemove")}} イベントの位置に対して相対的な、マウスポインタの Y 座標。</dd> - <dt>{{domxref("MouseEvent.offsetX")}} {{readonlyinline}}{{experimental_inline}}</dt> - <dd>対象ノードのパディング境界の位置に対して相対的な、マウスポインタの X 座標。</dd> - <dt>{{domxref("MouseEvent.offsetY")}} {{readonlyinline}}{{experimental_inline}}</dt> - <dd>対象ノードのパディング境界の位置に対して相対的な、マウスポインタの Y 座標。</dd> - <dt>{{domxref("MouseEvent.pageX")}} {{readonlyinline}}{{experimental_inline}}</dt> - <dd>ドキュメント全体に対して相対的な、マウスポインタの X 座標。</dd> - <dt>{{domxref("MouseEvent.pageY")}} {{readonlyinline}}{{experimental_inline}}</dt> - <dd>ドキュメント全体に対して相対的な、マウスポインタの Y 座標。</dd> - <dt>{{domxref("MouseEvent.region")}} {{readonlyinline}}</dt> - <dd>イベントの影響を受けたヒット領域の ID を返します。影響を受けたヒット領域がない場合は、<code>null</code> を返します。</dd> - <dt>{{domxref("MouseEvent.relatedTarget")}} {{readonlyinline}}</dt> - <dd>イベントのセカンダリターゲットがあれば、それを表します。</dd> - <dt>{{domxref("MouseEvent.screenX")}} {{readonlyinline}}</dt> - <dd>グローバル (スクリーン) 座標における、マウスポインタの X 座標。</dd> - <dt>{{domxref("MouseEvent.screenY")}} {{readonlyinline}}</dt> - <dd>グローバル (スクリーン) 座標における、マウスポインタの Y 座標。</dd> - <dt>{{domxref("MouseEvent.shiftKey")}} {{readonlyinline}}</dt> - <dd>マウスイベントが発生したときに <kbd>shift</kbd> キーが押下されていれば、<code>true</code> を返します。</dd> - <dt>{{domxref("MouseEvent.which")}} {{non-standard_inline}} {{readonlyinline}}</dt> - <dd>マウスイベントが発生したときに押下されていたボタン。</dd> - <dt>{{domxref("MouseEvent.mozPressure")}} {{non-standard_inline()}} {{deprecated_inline}} {{readonlyinline}}</dt> - <dd>イベントが生成されたとき、タッチデバイスやタブレットデバイスに与えられた圧力の大きさです。この値の範囲は、<code>0.0</code> (最小圧力) から <code>1.0</code> (最大圧力) の間です。このプロパティは非推奨 (または非標準) なので、代わりに {{domxref("PointerEvent")}} を使用し、 {{domxref("PointerEvent.pressure", "pressure")}} プロパティを見てください。</dd> - <dt>{{domxref("MouseEvent.mozInputSource")}} {{non-standard_inline()}} {{readonlyinline}}</dt> - <dd>イベントを生成したデバイスの種類 (<code>MOZ_SOURCE_*</code> 定数のいずれか)。これにより、例えばマウスイベントが実際のマウスによって発生したのか、あるいはタッチイベントによって発生したのかを識別できます (これは、イベントに関連する座標を解釈する際の正確さに影響を与えるでしょう)。</dd> - <dt>{{domxref("MouseEvent.webkitForce")}} {{non-standard_inline()}} {{readonlyinline}}</dt> - <dd>クリック時に与えられた圧力。</dd> - <dt>{{domxref("MouseEvent.x")}} {{experimental_inline}}{{readonlyinline}}</dt> - <dd>{{domxref("MouseEvent.clientX")}} の別名。</dd> - <dt>{{domxref("MouseEvent.y")}} {{experimental_inline}}{{readonlyinline}}</dt> - <dd>{{domxref("MouseEvent.clientY")}} の別名。</dd> -</dl> - -<h2 id="Constants" name="Constants">定数</h2> - -<dl> - <dt>{{domxref("MouseEvent.WEBKIT_FORCE_AT_MOUSE_DOWN")}} {{non-standard_inline}}{{readonlyinline}}</dt> - <dd>通常のクリックに必要な最小圧力。</dd> - <dt>{{domxref("MouseEvent.WEBKIT_FORCE_AT_FORCE_MOUSE_DOWN")}} {{non-standard_inline}}{{readonlyinline}}</dt> - <dd>強めのクリック (force click)に必要な最小圧力。</dd> -</dl> - -<h2 id="Methods" name="Methods">メソッド</h2> - -<p><em>このインターフェイスは、親インターフェイスである {{domxref("UIEvent")}} および {{domxref("Event")}} のメソッドも継承します。</em></p> - -<dl> - <dt>{{domxref("MouseEvent.getModifierState()")}}</dt> - <dd>指定した修飾キーの現在の状態を返します。詳しくは {{domxref("KeyboardEvent.getModifierState")}}() をご覧ください。</dd> - <dt>{{domxref("MouseEvent.initMouseEvent()")}} {{deprecated_inline}}</dt> - <dd>作成した <code>MouseEvent</code> の値を初期化します。イベントがすでにディスパッチされている場合は、何も行いません。</dd> -</dl> - -<h2 id="Example" name="Example">例</h2> - -<p>この例は、 DOM メソッドを使用してチェックボックスのクリックをシミュレーション (すなわち、プログラムで click イベントを生成) しています。</p> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html"><p><label><input type="checkbox" id="checkbox"> Checked</label> -<p><button id="button">Click me</button></pre> - -<h3 id="JavaScript">JavaScript</h3> - -<pre class="brush: js">function simulateClick() { - var evt = new <a href="/ja/docs/Web/API/MouseEvent">MouseEvent</a>("click", { +{{APIRef("DOM Events")}} + +**`MouseEvent`** インターフェイスは、ポインティング機器 (マウスなど) によるユーザーの操作によって発行されたイベントを表します。 +このインターフェイスを使用する一般的なイベントとして {{domxref("Element/click_event", "click")}}, {{domxref("Element/dblclick_event", "dblclick")}}, {{domxref("Element/mouseup_event", "mouseup")}}, {{domxref("Element/mousedown_event", "mousedown")}} があります。 + +`MouseEvent` は {{domxref("UIEvent")}} から派生しており、これはさらに {{domxref("Event")}} から派生しています。後方互換性のために {{domxref("MouseEvent.initMouseEvent()")}} メソッドは維持されていますが、 `MouseEvent` オブジェクトを作成する際は {{domxref("MouseEvent.MouseEvent", "MouseEvent()")}} コンストラクターを使用するべきです。 + +`MouseEvent` からは、 {{domxref("WheelEvent")}}, {{domxref("DragEvent")}} などの特定用途向けイベントが派生しています。 + +{{InheritanceDiagram}} + +## コンストラクター + +- {{domxref("MouseEvent.MouseEvent", "MouseEvent()")}} + - : `MouseEvent` オブジェクトを生成します。 + +## プロパティ + +_このインターフェイスは、親インターフェイスである {{domxref("UIEvent")}} および {{domxref("Event")}} のプロパティも継承しています。_ + +- {{domxref("MouseEvent.altKey")}} {{readonlyinline}} + - : マウスイベントが発行されたときに <kbd>alt</kbd> キーが押下されていれば `true` を返します。 +- {{domxref("MouseEvent.button")}} {{readonlyinline}} + - : マウスイベントが発行されたときに押下されたボタンの番号 (もしあれば) です。 +- {{domxref("MouseEvent.buttons")}} {{readonlyinline}} + - : マウスイベントが発行されたときに離されていたボタンの番号 (もしあれば) です。 +- {{domxref("MouseEvent.clientX")}} {{readonlyinline}} + - : ローカル (DOM コンテンツ) 座標における、マウスポインターの X 座標です。 +- {{domxref("MouseEvent.clientY")}} {{readonlyinline}} + - : ローカル (DOM コンテンツ) 座標における、マウスポインターの Y 座標です。 +- {{domxref("MouseEvent.ctrlKey")}} {{readonlyinline}} + - : マウスイベントが発行されたときに <kbd>control</kbd> キーが押下されていれば、 `true` を返します。 +- {{domxref("MouseEvent.metaKey")}} {{readonlyinline}} + - : マウスイベントが発行されたときに <kbd>meta</kbd> キーが押下されていれば、 `true` を返します。 +- {{domxref("MouseEvent.movementX")}} {{readonlyinline}} + - : 直前の {{domxref("Element/mousemove_event", "mousemove")}} イベントの位置から相対的な、マウスポインターの X 座標です。 +- {{domxref("MouseEvent.movementY")}} {{readonlyinline}} + - : 直前の {{domxref("Element/mousemove_event", "mousemove")}} イベントの位置から相対的な、マウスポインターの Y 座標です。 +- {{domxref("MouseEvent.offsetX")}} {{readonlyinline}} + - : 対象ノードのパディング境界の位置に対して相対的なマウスポインターの X 座標です。 +- {{domxref("MouseEvent.offsetY")}} {{readonlyinline}} + - : 対象ノードのパディング境界の位置に対して相対的なマウスポインターの Y 座標です。 +- {{domxref("MouseEvent.pageX")}} {{readonlyinline}} + - : 文書全体に対して相対的な、マウスポインターの X 座標です。 +- {{domxref("MouseEvent.pageY")}} {{readonlyinline}} + - : 文書全体に対して相対的な、マウスポインターの Y 座標です。 +- {{domxref("MouseEvent.region")}} {{readonlyinline}} + - : イベントの影響を受けたヒット領域の ID を返します。影響を受けたヒット領域がない場合は、`null` を返します。 +- {{domxref("MouseEvent.relatedTarget")}} {{readonlyinline}} + - : イベントのセカンダリターゲットがあれば、それを表します。 +- {{domxref("MouseEvent.screenX")}} {{readonlyinline}} + - : グローバル (スクリーン) 座標における、マウスポインターの X 座標。 +- {{domxref("MouseEvent.screenY")}} {{readonlyinline}} + - : グローバル (スクリーン) 座標における、マウスポインターの Y 座標。 +- {{domxref("MouseEvent.shiftKey")}} {{readonlyinline}} + - : マウスイベントが発行されたときに <kbd>shift</kbd> キーが押下されていれば、`true` を返します。 +- {{domxref("UIEvent.which")}} {{non-standard_inline}} {{readonlyinline}} + - : マウスイベントが発行されたときに押下されていたボタンです。 +- {{domxref("MouseEvent.mozPressure")}} {{non-standard_inline()}} {{deprecated_inline}} {{readonlyinline}} + - : イベントが発行されたとき、タッチ機器やタブレット機器に与えられた圧力の大きさです。この値の範囲は、`0.0` (最小圧力) から `1.0` (最大圧力) の間です。 + このプロパティは非推奨 (かつ標準外) であり、代わりに {{domxref("PointerEvent")}} を使用し、 {{domxref("PointerEvent.pressure", "pressure")}} プロパティを参照してください。 +- {{domxref("MouseEvent.mozInputSource")}} {{non-standard_inline()}} {{readonlyinline}} + - : イベントを生成した機器の種類 (`MOZ_SOURCE_*` 定数のいずれか)。 + これにより、例えばマウスイベントが実際のマウスによって発行されたのか、あるいはタッチイベントによって発行されたのかを識別できます (これは、イベントに関連する座標を解釈する際の正確さに影響を与えるでしょう)。 +- {{domxref("MouseEvent.webkitForce")}} {{non-standard_inline()}} {{readonlyinline}} + - : クリック時に与えられた圧力。 +- {{domxref("MouseEvent.x")}} {{readonlyinline}} + - : {{domxref("MouseEvent.clientX")}} の別名。 +- {{domxref("MouseEvent.y")}} {{readonlyinline}} + - : {{domxref("MouseEvent.clientY")}} の別名。 + +## 定数< + +- {{domxref("MouseEvent.WEBKIT_FORCE_AT_MOUSE_DOWN")}} {{non-standard_inline}}{{readonlyinline}} + - : 通常のクリックに必要な最小圧力。 +- {{domxref("MouseEvent.WEBKIT_FORCE_AT_FORCE_MOUSE_DOWN")}} {{non-standard_inline}}{{readonlyinline}} + - : 強めのクリック (force click)に必要な最小圧力。 + +## メソッド + +_このインターフェイスは、親インターフェイスである {{domxref("UIEvent")}} および {{domxref("Event")}} のメソッドも継承しています。_ + +- {{domxref("MouseEvent.getModifierState()")}} + - : 指定した修飾キーの現在の状態を返します。詳しくは {{domxref("KeyboardEvent.getModifierState")}}() をご覧ください。 +- {{domxref("MouseEvent.initMouseEvent()")}} {{deprecated_inline}} + - : 作成した `MouseEvent` の値を初期化します。イベントがすでに発行されている場合は、何も行いません。 + +## 例 + +この例では、 DOM メソッドを使ってチェックボックスのクリック（プログラムによるクリックイベントの生成）をシミュレートしています。 +イベントの状態（キャンセルされたかどうか）は、メソッド {{domxref("EventTarget.dispatchEvent", "EventTarget.dispatchEvent()")}} の返値で判断されます。 + +### HTML + +```html +<p><label><input type="checkbox" id="checkbox"> チェック</label></p> +<p><button id="button">クリックすると MouseEvent をチェックボックスに送信します</button></p> +``` + +### JavaScript + +```js +function simulateClick() { +// クリックイベントを送るために要素を取得 +const cb = document.getElementById("checkbox"); + +// クリックイベントの MouseEvent を合成 + let evt = new MouseEvent("click", { bubbles: true, cancelable: true, view: window }); - var cb = document.getElementById("checkbox"); //element to click on - var canceled = !cb.<a href="/ja/docs/Web/API/EventTarget.dispatchEvent" rel="internal">dispatchEvent</a>(evt); - if(canceled) { - // ハンドラで preventDefault を呼び出した場合 - alert("canceled"); - } else { - // ハンドラで preventDefault を呼び出さない場合 - alert("not canceled"); - } + +// イベントをチェックボックス要素に送信 +cb.dispatchEvent(evt); } -document.getElementById("button").addEventListener('click', simulateClick);</pre> - -<h3 id="Result" name="Result">結果</h3> - -<p>{{EmbedLiveSample('Example')}}</p> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSSOM View','#extensions-to-the-mouseevent-interface', 'MouseEvent')}}</td> - <td>{{Spec2('CSSOM View')}}</td> - <td><code>MouseEvent</code> を long から double へ再定義。すなわち <code>PointerEvent</code> の <code>pointerType</code> がマウスの場合、 double になります。</td> - </tr> - <tr> - <td>{{SpecName('Pointer Lock','#extensions-to-the-mouseevent-interface','MouseEvent')}}</td> - <td>{{Spec2('Pointer Lock')}}</td> - <td>{{SpecName('DOM3 Events')}} に <code>movementX</code> および <code>movementY</code> プロパティを追加。</td> - </tr> - <tr> - <td>{{SpecName('CSSOM View', '#extensions-to-the-mouseevent-interface', 'MouseEvent')}}</td> - <td>{{Spec2('CSSOM View')}}</td> - <td>{{SpecName('DOM3 Events')}} に <code>offsetX</code>, <code>offsetY</code>, <code>pageX</code>, <code>pageY</code>, <code>x</code>, <code>y</code> プロパティを追加。 screen, page, client, coordinate (x / y) プロパティを <code>long</code> から <code>double</code> へ変更。</td> - </tr> - <tr> - <td>{{SpecName('UI Events', '#interface-mouseevent', 'MouseEvent')}}</td> - <td>{{Spec2('UI Events')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('DOM3 Events','#events-mouseevents','MouseEvent')}}</td> - <td>{{Spec2('DOM3 Events')}}</td> - <td>{{SpecName('DOM2 Events')}} に <code>MouseEvent()</code> コンストラクタ、<code>getModifierState()</code> メソッド、<code>buttons</code> プロパティを追加。</td> - </tr> - <tr> - <td>{{SpecName('DOM2 Events','#Events-MouseEvent','MouseEvent')}}</td> - <td>{{Spec2('DOM2 Events')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("api.MouseEvent")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>直近の親である {{domxref("UIEvent")}}.</li> - <li>{{domxref("PointerEvent")}}: マルチタッチを含む拡張されたポインターイベント</li> -</ul> +document.getElementById("button").addEventListener('click', simulateClick); +``` + +### 結果 + +{{EmbedLiveSample('Example')}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- 直近の親である {{domxref("UIEvent")}} +- {{domxref("PointerEvent")}}: マルチタッチを含む拡張されたポインターイベント |