ywork2020.com

Title

要素にマウスムーブイベントを登録する

目次 (INDEX)

mousemoveとは

ここで説明する mousemove とは次の語句からなるjQueryのメソッドです。
mouse
読み: マウス
意味: 鼠、ここではパソコンの入力位置を指示するポインティングデバイスのこと。
move
読み: ムーブ
意味: 動く、移動する

目次に戻る

mousemoveメソッドの概要

このメソッドは、セレクタに該当する既存要素にマウスムーブイベントをバインドします。 また、メソッドの引数を空にした場合には既にバインドされているマウスムーブイベントを呼び出します。

マウスムーブとはブラウザ上でマウスポインターが要素の上を移動する状態を表します。

目次に戻る

構文

サンプルを見る前に構文を確認しておきます。

Selector.mousemove(Handler(EventObject));
Selector.mousemove([EventData], Handler(EventObject));
Selector.mousemove();
  • 01: マウスムーブイベントが発生した時点でハンドラーが実行されます。
  • 02: ハンドラーの引数であるイベントオブジェクトにデータを添付して実行します。
  • 03: セレクタにバインドしているマウスムーブイベントを呼び出します。

目次に戻る

サンプルコードと実行結果

ここでは、div要素を題材にします。

この要素にマウスムーブイベントをバインドし、要素上をマウスポインターが移動する度に要素上でのマウスポインターのオフセット位置を表示します。

サンプルコード: CSS
<style>
	div{
		background-color: ##lightblue;
		padding: 10px;
		height: 180px;
		width: 180px;
	}
</style>
サンプルコード: HTML
<head>
	<style>...</style>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
	<div>Element DIV</div>
	<script>...</script>
</body>
  • 06: div (div要素です。この要素にマウスムーブイベントをバインドします。)
サンプルコード: script
<script>
	$("div").mousemove(function(event){
		$(this).html(
			"X = " + event.offsetX
			+ "<br>" +
			"Y = " + event.offsetY
		);
	});
</script>
  • 02: $("div").mousemove(Handler(EventObject)) (div要素にマウスムーブイベントをバインドします。これにより、要素の上をマウスポインターが移動すると、Handler が実行されます。)
  • 03-07: $(this).html() (ここでの this は div のことです。この要素の innerHTML を書き換えます。)
  • 04: event.offsetX (eventオブジェクトのoffsetXプロパティから要素上のマウスポインターの水平位置を取得しています。)
  • 06: event.offsetY (eventオブジェクトのoffsetYプロパティから要素上のマウスポインターの垂直位置を取得しています。)
実行結果:
Element DIV

目次に戻る