. JQuery リファレンス:mousemove
JQuery リファレンス:mousemove
JQuery リファレンス:mousemove

Без кейворда

要素内でマウスカーソルが移動した時の処理を設定 返値:jQueryオブジェクト jQo.mousemove( function ) ver1.0〜 jQo.mousemove( ) ver1.0〜 jQo.mousemove( object, function ) ver1.4.3〜

※子孫要素内でもfunctionは実行されます。 機能

jQueryオブジェクトで指定した要素内でマウスカーソルが移動した時に引数のfunctionを実行します。引数にfunctionを設定しない場合は、要素に設定(バインド)されたfunctionを実行します。

※以降「要素内でマウスカーソルが移動した」動作のことをマウスムーブと呼びます。

解説 マウスムーブで実行する処理を設定 $(function () < $("div").mousemove(moveFunc); >);

mousemoveに設定するFunctionの構文 function 任意の名前(イベントオブジェクト) マウスムーブで実行したい処理 >

サンプルmousemove/01.htmlで利用したmoveFuncは以下の様になっており、イベントオブジェクトのプロパティ pageXと pageYを利用して、document内でのX座標とY座標を取得し、 textメソッドを利用してp要素に表示しています。

function moveFunc(eo) $("div").mousemove(function (eo) );) 他の要素に設定されたマウスムーブ時の処理を実行する $("button").click(function()< $("div").mousemove(); >) objectオブジェクトをfunctionに渡す $("div").mousemove( ,function(eo)< var str = "eo.data.test p").text(str); >) 子孫要素にも反応します $("#out").mousemove(function()< var str = "pageX:"+eo.pageX + " pageY:"+eo.pageY; $("p").text(str); >);

セレクタに「#out」を設定しているので、外側のdiv要素(outのid属性)上でマウスムーブした際にpageX, pageYが表示されるのは良いのですが、セレクタで指定されていない内側のdiv要素(inのid属性)上でマウスムーブした際もpageX,pageYが表示されます。このようにmousemoveメソッドは子孫要素上でも機能します。

📎📎📎📎📎📎📎📎📎📎