jQuery mousemove() メソッド

jQueryのイベント

mousemove()メソッドはmousemoveイベントをトリガーし、またはmousemoveイベントが発生したときに実行される関数をアタッチします。

マウスカーソルが選定された要素に移動するとmousemoveイベントが発生します。

mousemove、mouseenterおよびmouseoverイベントは同じですが、異なります：

• mouseenter-マウスカーソルが要素に入るときのみ呼び出されます

• mousemove-マウスカーソルが要素に移動するときに呼び出されます

• mouseover-マウスカーソルが要素およびその子要素に入るときに呼び出されます（以下の例を参照してください）

構文：

選定された要素のmousemoveイベントをトリガーします：

$("selector").mousemove()

関数をmousemoveイベントにアタッチします：

$("selector").mousemove(function)

例

mousemoveイベントがトリガーされたときにランダムな数を表示します：

$("div").mousemove(function(){
　　$("this").text(Math.random());
});

マウスカーソルがページ内の位置を取得します：

$(document).mousemove(function(event){　
　　$("#output").text("pageX:　"　+　event.pageX　+　",　pageY:　"　+　event.pageY);
});

mousemoveイベントがトリガーされたときに背景色を変更：

$("div").mousemove(function(){
　　$(this).css("background",　randColor());
});
//　ランダムな色を生成する関数
function　randColor()　{
　　return　'rgb('　+　Math.floor(Math.random()*256)　+　','　+　Math.floor(Math.random()*256)　+　
　　','　+　Math.floor(Math.random()*256)　+　')';
}

この例ではmousemove、mouseenter、mouseoverの違いを示します：

引数の値

jQueryのイベント