鼠标按下时的 X 和 y 坐标

Question

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

我使用了事件侦听器mousemove，它在我的英特尔 XDK 仿真器上运行，但现在我将它移动到触摸屏设备，我需要一个触摸事件，即 mousemove 和 mousedown ，我不知道该怎么做。

理想代码示例：

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

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

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

我不想将 JQuery 并入其中，只是纯 JS。

谢谢！ :)

编辑：让我重新措辞一下，这样一切都直截了当。当用户拖动一个对象时，我需要一个函数在整个拖动过程中吐出指针的 x 和 y。

Answer 1

每个 MDN：

EventTarget.addEventListener() 方法在调用它的 EventTarget 上注册指定的侦听器。事件目标可以是文档中的元素、文档本身、窗口或任何其他支持事件的对象（例如 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>

Answer 2

对于触控设备，您应该查看touchstart、touchend、touchcancel 和touchmove。

触摸事件类似于鼠标事件，只是它们支持同时触摸和在触摸表面的不同位置。

https://developer.mozilla.org/en-US/docs/Web/API/Touch_events`

Answer 3

MDN 有一篇关于触摸事件的精彩帖子。这些帖子不仅充满了质量信息，而且还显示了许多 javascript 代码，这些代码将为您提供触摸事件的良好资源。

接口

TouchEvent

表示当表面上的触摸状态发生变化时发生的事件。

Touch

表示用户和触摸表面之间的单点接触。

TouchList

代表一组触摸；例如，当用户在表面上同时有多个手指时使用。

---

这如何解决我目前的问题？

以上信息为您可能想要查看的所有类型的事件提供了更多详细信息。但是，对于您的具体问题，您应该查看 touchmove 和 touchend 事件。

旁注 - 检查 touchmove 和 touchend 链接是否存在兼容性问题。