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