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

IT技术 javascript html onclick onmouseclick
2021-01-18 09:15:34

我有一个小 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 会是最好的）。谢谢！

3个回答

像这样。

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

如果单击位于 iframe 内，则不起作用
2021-03-17 09:15:34
这是正确答案，应如此标记
2021-03-21 09:15:34
2021-03-23 09:15:34

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

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

游戏.js：

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

      cursorX = e.pageX;
      cursorY= e.pageY;
      $( "#test" ).text( "pageX: " + cursorX +",pageY: " + cursorY );
}
其它你可能感兴趣的问题
上一篇如何在不使用库的情况下反转 JavaScript 中的数组？ 下一篇在放入 RegEx 之前应该转义的所有字符的列表？