[JavaScript] jQuery のMouseMoveイベントを利用する

このページのタグ:[JavaScript] [jQuery]
jQueryのMOuseMoveイベントを利用します。

書式

(セレクタ).mousemove(イベント実行関数)
または
(セレクタ).mousemove(function((引数)){
  ...クリック時に実行する処理
 })
と記述します。

座標

マウスポインタの座標は、mousemoveイベントにより呼び出される関数の引数に与えられます。
  • clientX, clientY
  • pageX, pageY
  • offsetX, offsetY
  • screenX, screenY
のプロパティでアクセスできます。

コード

以下のコードを記述します。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title></title>
  <script type="text/javascript" src="jquery-2.0.3.js"></script>
  <script type="text/javascript">
    $(document).ready(function () {
      $("div.canvas").mousemove(function (e) {
        $("div#message1").html("Client:" + e.clientX+","+e.clientY);
        $("div#message2").html("Page  :" + e.pageX + "," + e.pageY);
        $("div#message3").html("Offset:" + e.offsetX + "," + e.offsetY);
        $("div#message4").html("Screen:" + e.screenX + "," + e.screenY);
      })
    })
  </script>
  <style>
    .canvas {
      border: solid 1px #0094ff;
      background-color: #e1e1e1;
      width: 400px;
      height: 800px;
    }
    .MessageFrame{
      left:420px;
      top:16px;
      position:fixed;
    }
  </style>
</head>
<body>
  <div class="canvas">領域</div>
  <div class="MessageFrame">
    <div id="message1"></div>
    <div id="message2"></div>
    <div id="message3"></div>
    <div id="message4"></div>
  </div>
</body>
</html>

実行結果

上記のHTMLファイルを表示するを下図の表示結果となります。


[領域]の枠内にマウスポインタが入ると枠の右側に座標値が表示されます。Client,Pageは表示画面(ページ)の左上を原点としたときのマウスポインタの座標値が表示されます。Offsetは[領域]の枠の左上を原点した時の座標値が表示されます。ScreenはPCの画面の左上を原点とした時の座標値を表示します。


ページを縦方向にスクロールして、[領域]の枠内にマウスポインタを入れます。Clientは表示されているページの左上を原点とした時の座標値が表示されますが、Pageはスクロールで隠れてしまったページの先頭の左上を原点とした時の座標値を表示しています。Offset,Screenは先と同様です。Offsetは枠の左上を原点としているためスクロールで見えなくなっている部分が原点になっています。


登録日 :2013-12-27    最終更新日 :2014-06-05
このページのタグ:[JavaScript] [jQuery]
Japanese
プライバシー    iPentecについて
iPentec all rights reserverd. (ISDC)