[jQuery] マウスポインタの座標を取得する

投稿日：2017年6月18日更新日：2018年5月2日

jQueryでマウスポインタの座標位置をリアルタイムで取得するサンプルです。

サンプルソース

例）マウスを動かすとリアルタイムでX座標とY座標の位置を表示する

<!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>
$(function(){
  $(window).mousemove(function(){
    $('#txt1').val(event.clientX);
    $('#txt2').val(event.clientY);
  });
});
</script>
</head>
<body>
  X座標:<input type="text" id="txt1">
  Y座標:<input type="text" id="txt2">
</body>
</html>

<!DOCTYPE html>

<head>

$(function(){

$(window).mousemove(function(){

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

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

});

</script>

</head>

<body>

X座標:<input type="text" id="txt1">

Y座標:<input type="text" id="txt2">

</body>

</html>

実行サンプル

マウスを動かすと以下にポインタの座標が表示されます。

X座標：　Y座標：

解説

JavaScript版は、以下ページをご覧ください。
→ [JavaScript] マウスポインタの座標を取得する

執筆者：とら