jQuery でマウス操作のイベント処理 (デモあり)

jQuery でマウスのイベントを処理するには、$(function() {・・・}) 内でイベントリスナーを登録します。

マウス関連のイベントリスナー登録メソッドには

  • click
  • dblclick
  • mousedown
  • mouseup
  • mouseenter
  • mouseleave
  • mouseover
  • mouseout
  • mousemove
  • hover
  • contextmenu

などがあります(後述します)。

デモ

以下の OK ボタン上でマウスを操作すると、イベントリスナーが呼び出され、テキストエリアに操作内容が出力されます。



ソース

イベントリスナー登録用 メソッド

click

要素上でのクリック イベントのリスナーを登録します。

dblclick

要素上でのダブル・クリック イベントのリスナーを登録します。

mousedown

要素上でのマウスボタン押下 イベントのリスナーを登録します。

ボタンの左右を判定する場合、引数として event を受け取り、which を確認します。

which の値は 1、2、3 のいづれかで、以下を表しています。

  • 1 : 左ボタン
  • 2 : 中央ホイール
  • 3 : 右ボタン

mouseup

要素上でのマウスボタン up イベントのリスナーを登録します。

mouseenter

要素上にマウスポインタが入ったときのイベント リスナーを登録します。

mouseleave

要素上からマウスポインタが出たときのイベント リスナーを登録します。

mouseover

要素上にマウスポインタが入ったときのイベント リスナーを登録します。

mouseout

要素上からマウスポインタが出たときのイベント リスナーを登録します。

mousemove

要素上でマウスポインタが動いたときのイベント リスナーを登録します。

マウスの位置を確認する場合、引数として event を受け取り、そこから以下の情報を取得します。

screenX、screenY
clientX、clientY
pageX、pageY
offsetX、offsetY
・・・ スクリーン全体での座標
・・・ ウィンドウ全体での座標
・・・ ページ全体での座標
・・・ 要素内での座標

たとえば、要素内でのマウスの位置を確認する場合は

となります。

hover

要素上にマウスポインタが出入りしたときのイベント リスナーを登録します。

リスナーは 2 つ登録できます。1 つはマウスポインタが入ったとき、もう 1 つはマウスポインタが出たときのリスナーです。

contextmenu

要素上での右クリック イベントのリスナーを登録します。

コメントはお気軽に