Question

我有一个小div标签，当我点击它（onClick event）时，它将运行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的未定义，所以我假设函数中的get x和y代码是不正确的。有任何想法吗？我也知道javascript本身没有任何内置函数可以像java一样返回x和y，ex ..有没有办法用JQuery或php做到这一点？（尽管可能，尽量避免那些，javascript会是最好的）。谢谢！

Answer 1

喜欢这个。

＆＃13;

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

＆＃13;

<强> MouseEvent - MDN

MouseEvent.clientX 只读
  鼠标指针在本地（DOM内容）坐标中的X坐标。

MouseEvent.clientY 只读
  鼠标指针的Y坐标在本地（DOM内容）坐标中。

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

简单的解决方案是：

game.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 个答案: