web-dev-qa-db-ja.com

javascriptはマウスクリックでxおよびy座標を取得します

クリックすると（onClickイベント）、printMousePos()関数を実行する小さなdivタグがあります。これはHTMLタグです。

<html>
    <header>
        <!-- By the way, this is not the actual html file, just a generic example. -->
        <script src='game.js'></script>
    </header>
    <body>
        <div id="example">
            <p id="test">x: , y:</p>
        </div>
    </body>
</html>

これは、別個の.jsファイル内のprintMousePos関数です。

function printMousePos() {
    var cursorX;
    var cursorY;
    document.onmousemove = function(e){
    cursorX = e.pageX;
    cursorY = e.pageY;
}
    document.getElementById('test').innerHTML = "x: " + cursorX + ", y: " + cursorY;
}

はい、関数は実際に動作します（クリックするとすべてがわかります）が、xとyの両方でundefinedを返すため、関数のget xおよびyコードが正しくないと仮定しています。何か案は？また、Javaのようにxとyを返すJavaScript自体には組み込み関数がないこともわかっています。たとえば、JQueryやphpなどでそれを行う方法はありますか。 （ただし、可能であればそれらを避けてください。javascriptが最適です）。ありがとう！

javascripthtmlonclickonmouseclick
40
Bryce Hahn

このような。

function printMousePos(event) {
  document.body.textContent =
    "clientX: " + event.clientX +
    " - clientY: " + event.clientY;
}

document.addEventListener("click", printMousePos);

MouseEvent-MDN

MouseEvent.clientX Read only
ローカル（DOMコンテンツ）座標でのマウスポインターのX座標。

MouseEvent.clientY Read only
ローカル（DOMコンテンツ）座標でのマウスポインターのY座標。

71
Jonathan

printMousePos関数は次のように聞こえます：

  1. マウスのXおよびY座標を取得します
  2. これらの値をHTMLに追加します

現在、これはこれを行います：

  1. マウスのXおよびY座標の（未定義の）変数を作成します
  2. 「mousemove」イベントに関数をアタッチします（マウスの移動によってトリガーされると、これらの変数をマウス座標に設定します）
  3. 変数の現在の値をHTMLに追加します

問題が発生しましたか？変数が「mousemove」イベントに関数を追加するとすぐに印刷されるため、変数が設定されることはありません。

おそらく、そのmousemoveイベントはまったく必要ないようです。私はこのようなものを試してみます：

function printMousePos(e) {
    var cursorX = e.pageX;
    var cursorY = e.pageY;
    document.getElementById('test').innerHTML = "x: " + cursorX + ", y: " + cursorY;
}
6
Kylok

簡単な解決策は次のとおりです。

game.js：

document.addEventListener('click', printMousePos, true);
function printMousePos(e){

      cursorX = e.pageX;
      cursorY= e.pageY;
      $( "#test" ).text( "pageX: " + cursorX +",pageY: " + cursorY );
}
0
Tea