Element: mousedown イベント
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
mousedown イベントは、ポインターが要素の中にあるときにポインティングデバイスのボタンが押下されたとき、その要素 (Element) に発行されます。
メモ:
click イベントとの違いは、 click イベントが完全なクリック操作の後、つまり、同じ要素内でマウスのボタンが押されて離された後で発行されることです。 mousedown はボタンが最初に押された時点で発行されます。
構文
このイベント名を addEventListener() 等のメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。
addEventListener("mousedown", (event) => {});
onmousedown = (event) => {};
イベント型
MouseEvent です。 UIEvent および Event を継承しています。
イベントプロパティ
親である UIEvent および Event から継承したプロパティもあります。
MouseEvent.altKey読取専用-
このマウスイベントが発行されたときに alt キーが押されていた場合は
trueを返します。 -
このマウスイベントが発行されたときに押されていたボタンの番号です(もしあれば)。
-
このマウスイベントが発行されたときに押されていたボタンです(もしあれば)。
MouseEvent.clientX読取専用-
ビューポート座標におけるマウスポインターの X 座標です。
MouseEvent.clientY読取専用-
ビューポート座標におけるマウスポインターの Y 座標です。
MouseEvent.ctrlKey読取専用-
このマウスイベントが発行されたときに control キーが押されていた場合は
trueを返します。 MouseEvent.layerX非標準 読取専用-
このイベントの現在のレイヤーにおける相対の水平座標を返します。
MouseEvent.layerY非標準 読取専用-
このイベントの現在のレイヤーにおける相対の垂直座標を返します。
MouseEvent.metaKey読取専用-
このマウスイベントが発行されたときに meta キーが押されていた場合は
trueを返します。 MouseEvent.movementX読取専用-
前回の
mousemoveイベントの位置から相対的なマウスポインターの X 座標です。 MouseEvent.movementY読取専用-
前回の
mousemoveイベントの位置から相対的なマウスポインターの Y 座標です。 MouseEvent.offsetX読取専用-
対象ノードのパディング辺からの相対的なマウスポインターの X 座標です。
MouseEvent.offsetY読取専用-
対象ノードのパディング辺からの相対的なマウスポインターの Y 座標です。
MouseEvent.pageX読取専用-
文書全体からの相対的なマウスポインターの X 座標です。
MouseEvent.pageY読取専用-
文書全体からの相対的なマウスポインターの Y 座標です。
-
もしあれば、イベントの副ターゲットです。
MouseEvent.screenX読取専用-
スクリーン座標におけるマウスポインターの X 座標です。
MouseEvent.screenY読取専用-
スクリーン座標におけるマウスポインターの Y 座標です。
MouseEvent.shiftKey読取専用-
このマウスイベントが発行されたときに shift キーが押されていた場合は
trueを返します。 MouseEvent.mozInputSource非標準 読取専用-
イベントを発生させた機器の種類(
MOZ_SOURCE_*定数のいずれか)。 これにより、例えばマウスイベントが実際のマウスによって生成されたのか、タッチイベントによって生成されたのかを判断することができます(これはイベントに関連付けられた座標を解釈する精度に影響するかもしれません)。 MouseEvent.webkitForce非標準 読取専用-
クリックしたときに適用された圧力です。
MouseEvent.x読取専用-
MouseEvent.clientXの別名です。 MouseEvent.y読取専用-
MouseEvent.clientYの別名です。
例
例のコードについては mousemove イベントを参照してください。
仕様書
| Specification |
|---|
| UI Events> # event-type-mousedown> |
| HTML> # handler-onmousedown> |
ブラウザーの互換性
Loading…