javascript在鼠標單擊時獲取x和y坐標

Question

我有一個小 div 標簽，當我單擊它（ onClick事件）時，它將運行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，所以我假設函數中的 get x 和 y 代碼不正確。 有任何想法嗎？ 我也知道 javascript 本身沒有任何內置函數可以像在 java 中那樣返回 x 和 y，例如……有沒有辦法用 JQuery 或 php 來做到這一點？ （如果可能的話，避免那些，javascript 會是最好的）。 謝謝！

Answer 1

像這樣。

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

鼠標事件 - MDN

MouseEvent.clientX只讀
鼠標指針在本地（DOM 內容）坐標中的 X 坐標。

MouseEvent.clientY只讀
鼠標指針在本地（DOM 內容）坐標中的 Y 坐標。

Answer 2

聽起來您的printMousePos函數應該：

獲取鼠標的 X 和 Y 坐標
將這些值添加到 HTML

目前，它這樣做：

為鼠標的 X 和 Y 坐標創建（未定義）變量
將函數附加到“mousemove”事件（當鼠標移動觸發時，將這些變量設置為鼠標坐標）
將變量的當前值添加到 HTML

看到問題了嗎？ 你的變量永遠不會被設置，因為一旦你將你的函數添加到“mousemove”事件中，你就會打印它們。

看起來您可能根本不需要那個 mousemove 事件； 我會嘗試這樣的事情：

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

Answer 3

簡單的解決方案是這樣的：

游戲.js：

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

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

javascript在鼠標單擊時獲取x和y坐標

問題描述

3 個解決方案

解決方案1
110 2014-05-19 18:30:45

解決方案2
14 2014-05-19 18:39:04

解決方案3
0 2017-10-29 21:03:49

javascript在鼠標單擊時獲取x和y坐標

問題描述

3 個解決方案

解決方案1 110 2014-05-19 18:30:45

解決方案2 14 2014-05-19 18:39:04

解決方案3 0 2017-10-29 21:03:49

解決方案1
110 2014-05-19 18:30:45

解決方案2
14 2014-05-19 18:39:04

解決方案3
0 2017-10-29 21:03:49