マウスイベントの備忘録
公開日:2021年12月31日
よく使うマウスイベント
| イベント | タイミング | バブリング |
|---|---|---|
| click | クリック時 | する |
| dblclick | ダブルクリック時 | する |
| contextmenu | 右クリック時 | する |
| mousedown | マウスボタンを押したとき | する |
| mouseup | マウスボタンを離したとき | する |
| mouseover | マウスポインタが乗った時 | する |
| mouseout | マウスポインタが離れた時 | する |
| mouseenter | マウスポインタが乗った時 | しない |
| mouseleave | マウスポインタが離れた時 | しない |
| mousemove | マウスポインタが動いたとき | する |
| wheel | マウスホイールを回したとき | する |
よく使うMouseEventオブジェクトのプロパティ
$('セレクタ').on('マウスイベント', function(e) {
// 引数「e」でMouseEventオブジェクトを受け取る
});
押されたマウスボタンを調べる
| プロパティ | 内容 |
|---|---|
| e.button | どのボタンが押されたのかを数値で管理。 click/dblclickイベント時は常に「0」になるのでmousedown/mouseupイベントで使用。 0: 一般的に左ボタンが押された時。もしくは未初期化状態の時。 1: 一般的にホイールボタンまたは中央のボタンが押された場合。 2: 一般的に右ボタン。 3: 一般的にブラウザーの戻るボタン。 4: 一般的にブラウザーの進むボタン。 |
「3」の「ブラウザーの戻るボタン」が押された時に広告表示などに使用。
座標位置を調べる
| プロパティ | 内容 |
|---|---|
| e.screenX | モニタ画面の左上を基準にした横方向 X 座標位置 |
| e.screenY | モニタ画面の左上を基準にした縦方向 Y 位置 |
| e.clientX | ブラウザの左上を基準にした横方向 X 座標位置 |
| e.clientY | ブラウザの左上を基準にした縦方向 Y 位置 |
| e.offsetX | 対象要素（マージン除く）の左上を基準にした横方向 X 座標位置 |
| e.offsetY | 対象要素（マージン除く）の左上を基準にした縦方向 Y 位置 |
| プロパティ | 内容 |
|---|---|
| e.pageX | Webページの左上を基準にした横方向 X 座標位置 ※スクロールで隠れた部分も含む座標位置 |
| e.pageY | Webページの左上を基準にした縦方向 Y 位置 ※スクロールで隠れた部分も含む座標位置 |
Webページの上部からあるスクロール位置に到達したら「ページ上部へ戻る」ボタンを表示/非表示するなどの条件に使用する。
よく使うWheelEventオブジェクト
$('セレクタ').on('wheel', function(e) {
// 引数「e.originalEvent」でWheelEventオブジェクトを受け取る
});
マウスホイールを回した（wheelイベント）時に利用できるオブジェクト。
WheelEventオブジェクトは「e.originalEvent」プロパティに格納される。「originalEventプロパティ」指定を忘れないようにする。
| プロパティ | 内容 |
|---|---|
| e.originalEvent.deltaX | 縦方向スクロール量 |
| e.originalEvent.deltaY | 横方向スクロール量 |
スクロール量を加算代入し総量を求める。ある程度スクロールした際に広告等を表示するなどが考えられる。
同じカテゴリーのコンテンツ
