Events/API/jQuery
mousemove(fn)
各要素のmousemoveイベントに関数をbindします。
mousemoveイベントは通常、マウスなどのポインティングデバイスが要素上で動いた際に呼び出されます。
イベントハンドラはコールバック関数にイベントオブジェクトを渡します。イベントオブジェクトはclientX/clientYというプロパティを持ち、マウスカーソルの位置を取得できます。
jQueryのイベントは、コールバック関数の最初の引数でjQuery.Eventオブジェクトを受け取ることができます。このオブジェクトを使って、規定のイベント動作のキャンセルや、バブリングの抑制などを行います。
mousemoveイベントは通常、マウスなどのポインティングデバイスが要素上で動いた際に呼び出されます。
イベントハンドラはコールバック関数にイベントオブジェクトを渡します。イベントオブジェクトはclientX/clientYというプロパティを持ち、マウスカーソルの位置を取得できます。
jQueryのイベントは、コールバック関数の最初の引数でjQuery.Eventオブジェクトを受け取ることができます。このオブジェクトを使って、規定のイベント動作のキャンセルや、バブリングの抑制などを行います。
サンプル
サンプル1
黄色いdiv上にマウスが乗った際に、位置を表示します。
<p> Try scrolling too. <span>Move the mouse over the div.</span> <span> </span> </p> <div></div>
$("div").mousemove(function(e){
var pageCoords = "( " + e.pageX + ", " + e.pageY + " )";
var clientCoords = "( " + e.clientX + ", " + e.clientY + " )";
$("span:first").text("( e.pageX, e.pageY ) - " + pageCoords);
$("span:last").text("( e.clientX, e.clientY ) - " + clientCoords);
});
矩形内をスクロールさせて、clientYとpageYの違いにも注目して見てください。
[全コードを表示]
[実行結果を単体で表示]