[jQuery] マウスカーソル移動時イベントを取得する（.mousemove）

投稿日：2017年10月9日更新日：2018年5月2日

jQueryでマウスカーソル移動時イベントを取得するには、.mousemoveを使用します。

サンプルソース

例）マウスカーソルを移動すると、座標を表示する

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>サンプル</title>
<script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
$(document).ready(function(){
  $(window).mousemove(function(){
    $('#txt1').val(event.clientX);
    $('#txt2').val(event.clientY);
  });
});
</script>
</head>
<body>
  <div>X座標:<input type="text" id="txt1"></div>
  <div>Y座標:<input type="text" id="txt2"></div>
</body>
</html>

<!DOCTYPE html>

<head>

$(document).ready(function(){

$(window).mousemove(function(){

$('#txt1').val(event.clientX);

$('#txt2').val(event.clientY);

});

</script>

</head>

<body>

</body>

</html>

実行サンプル

下の枠内でマウスを動かすと、ポインタの座標が表示されます。

解説

JavaScript版は以下ページをご覧ください。
→ [JavaScript] マウスが移動したイベントを取得する（onMouseMove）

執筆者：とら