javascript - 鼠标按下时的 X 和 y 坐标

Question

我目前正在制作一款游戏，要求玩家在触摸屏设备上拖动对象。

我使用了事件监听器 mousemove，它在我的 Intel XDK 模拟器上工作，但现在我将它移到触摸屏设备上，我需要一个触摸事件 mousemove 和 mousedown，我不知道该怎么做。

理想代码示例:

canvas.addEventListener("mousemove" && "mousedown", function(e){  
    pointerX = e.pageX;
    pointerY = e.pageY;
}

所以这个理想的代码在鼠标按下时吐出 x 和 y，它已经移动了。

如果有人知道合法的语法或不同的方法，那将是一个很大的帮助。

我不想将 JQuery 合并到这里，只是纯 JS。

谢谢! :)

编辑:让我改写一下，这样一切就直截了当了。当用户拖动一个对象时，我需要一个函数来吐出整个拖动过程中指针的 x 和 y。

Answer 1

根据 MDN:

The EventTarget.addEventListener() method registers the specified listener on the EventTarget it's called on. The event target may be an Element in a document, the Document itself, a Window, or any other object that supports events (such as XMLHttpRequest).

注意上面的“eventTarget”。 AddEventListener 方法仅采用一个表示 EventType 的字符串。您需要编写自定义函数以迭代多个事件:

const target = document.getElementById("myDiv");

['mousedown', 'mousemove'].forEach(eventType => {
  target.addEventListener(eventType, (event) => {
    target.innerText = `x: ${event.pageX} y: ${event.pageY}`;
  });
});

#myDiv {
  width: 100px;
  height: 100px;
  background-color: orange;
  color: white;
}

<div id="myDiv"></div>