Learning site for website creation

マウスイベントの備忘録

公開日:2021年12月31日 更新日:2022年03月14日

マウスイベント使用プロパティ確認用ページ

よく使うマウスイベント

イベントタイミングバブリング
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.pageXWebページの左上を基準にした横方向 X 座標位置
※スクロールで隠れた部分も含む座標位置
e.pageYWebページの左上を基準にした縦方向 Y 位置
※スクロールで隠れた部分も含む座標位置

Webページの上部からあるスクロール位置に到達したら「ページ上部へ戻る」ボタンを表示/非表示するなどの条件に使用する。

よく使うWheelEventオブジェクト

$('セレクタ').on('wheel', function(e) {
  // 引数「e.originalEvent」でWheelEventオブジェクトを受け取る
});

マウスホイールを回した(wheelイベント)時に利用できるオブジェクト。
WheelEventオブジェクトは「e.originalEvent」プロパティに格納される。「originalEventプロパティ」指定を忘れないようにする。

プロパティ内容
e.originalEvent.deltaX縦方向スクロール量
e.originalEvent.deltaY横方向スクロール量

スクロール量を加算代入し総量を求める。ある程度スクロールした際に広告等を表示するなどが考えられる。