75

onClickクリックすると（イベント）、関数が実行される小さなdivタグがありprintMousePos()ます。これは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 を返すため、関数内の x と y の取得コードが正しくないと想定しています。何か案は？私はまた、Javaのようにxとyを返すためにjavascript自体に組み込み関数がないことも知っています。例えば、JQueryやphpでそれを行う方法はありますか? （ただし、可能であればそれらを避けてください。javascriptが最適です）。ありがとう！

4

3 に答える 3

115

このような。

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

document.addEventListener("click", printMousePos);

マウスイベント - MDN

MouseEvent.clientXRead only
ローカル (DOM コンテンツ) 座標でのマウス ポインターの X 座標。

MouseEvent.clientYRead only
ローカル (DOM コンテンツ) 座標でのマウス ポインターの Y 座標。

于 2014-05-19T18:30:45.053 に答える
1

簡単な解決策はこれです：

game.js:

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

      cursorX = e.pageX;
      cursorY= e.pageY;
      $( "#test" ).text( "pageX: " + cursorX +",pageY: " + cursorY );
}
于 2017-10-29T21:03:49.453 に答える