鼠标按下时的 X 和 y 坐标

Question

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

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

理想代码示例：

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

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

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

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

谢谢！ :)

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

Answer 1

对于触摸设备，您应该研究 touchstart、touchend、touchcancel 和 touchmove。

Touch events are similar to mouse events except they support simultaneous touches and at different locations on the touch surface.

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

Answer 2

MDN 在触摸事件上有很好的 post。 post 不仅包含高质量的信息，而且还显示了大量 javascript 代码，它们将为您提供触摸事件的良好资源。

接口

TouchEvent

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

Touch

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

TouchList

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

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

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

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

Answer 3

根据 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>

鼠标按下时的 X 和 y 坐标

X and y coordinates while mousedown

javascript

canvas

mousemove

mousedown

接口

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