

マウスの位置情報を連続的に取得する方法を探しています。

簡単に問題の背景を記しておきます。  
現在ホームページ(HP)を作成しております。  
そのHPの中で、マウスを使って線を引いた（絵を描いたなど）時のマウスの位置情報をすべて取得したいのです。  
javascriptを用いまして、マウスをクリックしたときの位置情報は下記のコードで取得可能ですが、

[code]

    var offset_t = $(this).offset().top - $(window).scrollTop();
    var offset_l = $(this).offset().left - $(window).scrollLeft();
    
    var left = Math.round( (e.clientX - offset_l) );
    var top = Math.round( (e.clientY - offset_t) );
    
[/code]

マウスをドラッグしている最中のマウスの位置情報の取得する方法がわかりません。

希望としては、OnClickではなく、  
「長押し」や「Ctrl」を押している間にマウスが動いた位置情報を取得したいです。

もしこのようなことが可能であれば、ご教授をお願いします。  
よろしくお願いいたします。


CC BY-SA 3.0
2016-09-26T12:47:55.717
29148
2016-09-26T13:27:08.087
11048
question
javascript php html
マウスの位置情報のトレースの仕方について


マウスが動くと`mousemove`イベントが発行されるので、リスナーを指定することでマウスが移動した時の処理を足すことができます。ページのどこにマウスあっても位置を取得したい場合は`document.addEventListener("mousemove",
function(event){/*ここに処理*/});`という様な感じです。変数`event`は[MouseEventクラス](https://developer.mozilla.org/ja/docs/Web/API/MouseEvent)のオブジェクトで、`event.clientX`でエレメント基準のX座標、`event.buttons`で押されているボタンなどが確認できます。  
詳しくはリンク先の方が全て揃っていてわかりやすいかと思います。  
一応サンプルを書いておきました：

[code]

    var xval = document.getElementById("xval");
    var yval = document.getElementById("yval");
    var xdel = document.getElementById("xdel");
    var ydel = document.getElementById("ydel");
    var ctrlval = document.getElementById("ctrlval");
    var shftval = document.getElementById("shftval");
    var bval = document.getElementById("bval");
    document.addEventListener("mousemove", function(event) {
      xval.innerHTML = event.clientX;
      yval.innerHTML = event.clientY;
      xdel.innerHTML = event.movementX;
      ydel.innerHTML = event.movementY;
      ctrlval.innerHTML = event.ctrlKey;
      shftval.innerHTML = event.shiftKey;
      
      bval.innerHTML = "";
      if((event.buttons & 1) > 0){bval.innerHTML += "左";}
      if((event.buttons & 2) > 0){bval.innerHTML += "右";}
    });
[/code]

[code]

    <p>X: <span id="xval"></span>, Y: <span id="yval"></span></p>
    <p>deltaX: <span id="xdel"></span>, deltaY: <span id="ydel"></span></p>
    <p>CTRL: <span id="ctrlval"></span>, SHFT: <span id="shftval"></span></p>
    <p>ボタン: <span id="bval"></span></p>
[/code]

動いていない時にボタンが押されたことを判定したい場合は`mousemove`の代わりに`mousedown`などが使えます。


CC BY-SA 3.0
2016-09-26T13:16:22.680
29149
2016-09-26T13:27:08.087
2016-09-26T13:27:08.087
3974
3974
29148
answer