開発者ドキュメント

jQuery mousemove()の例

たとえば、「bigbigbox」のIDを持つ大きな300 x 200 divボックス。

<style type="text/css">
    #bigbigbox{
        margin:16px 16px 16px 48px;
        border:1px groove blue;
        background-color : #BBBBBB;
        width:300px;
        height:200px;
    }
    #msg{
        color:#800000;
    }
</style>

<div id="bigbigbox"></div>

この大きなビッグボックスに

mousemove()

イベントをバインドします。

$('#bigbigbox').mousemove(function(event) {
  var msg = 'mousemove() position - x : ' + event.pageX + ', y : ' + event.pageY;
});

マウスがdiv ”

bigbigbox

“要素内を移動すると、

mousemove()

イベントが発生し、

event.PageX



event.pageY

を使用してボックス内のマウスの位置を追跡することができます。

ユースケース?

この

mousemove()

イベントをどこに適用しますか?あなたが知っている場合はいくつかお勧めします:)

自分で試してみてください

<html>
<head>

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>

<style type="text/css">
    #bigbigbox{
        margin:16px 16px 16px 48px;
        border:1px groove blue;
        background-color : #BBBBBB;
        width:300px;
        height:200px;
    }
    #msg{
        color:#800000;
    }
</style>

</head>
<body>
  <h1>jQuery mousemove example</h1>

  <div id="bigbigbox"></div>

  <p id="msg"></p>

<script type="text/javascript">

var i=0;
$('#bigbigbox').mousemove(function(event) {
  var msg = 'mousemove() position - x : ' + event.pageX + ', y : '
                + event.pageY + '[counter]: ' + i++;
  $('#msg').text(msg);
});

</script>
</body>
</html>
モバイルバージョンを終了