javascript - 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 返回未定义，所以我假设函数中的获取 x 和 y 代码不正确。有任何想法吗？我也知道 javascript 本身没有任何内置函数来返回 x 和 y 就像在 java 中一样，例如 .. 有没有办法用 JQuery 或 php 来做到这一点？（如果可能，请避免使用这些，最好使用 javascript）。谢谢！

score 115 · Accepted Answer

像这样。

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 坐标。

score 15 · Accepted Answer

听起来您的 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;
}

score 1 · Accepted Answer

简单的解决方案是这样的：

游戏.js：

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

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

javascript - javascript 在鼠标单击时获取 x 和 y 坐标

3 回答 3

Related

Reference