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）。

注意＆＃34; eventTarget＆＃34;以上。 AddEventListener方法只接受一个表示EventType的字符串。您需要编写自定义函数才能迭代多个事件：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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＆amp; touchend 事件。

旁注 - 检查touchmove＆amp; touchend 指向兼容性问题的链接。

在mousedown时X和y坐标

3 个答案:

接口

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