javascript - 在 Canvas 上拖动 JavaScript

Question

我一直在使用 mousedown、mousemove 和其他触摸事件，但它们似乎都不能解决我的问题。

我的目标是尝试获取一个跟随用户手指或鼠标的对象。我尝试使用 mousemove，它有效，但仅限于计算机。在移动设备上，它失败了，仅在点击开始之后，没有其他内容。

我认为这个问题可能是因为在计算机上，如果单击并拖动鼠标，计算机会将其视为拖动。在移动设备上，拖动可能意味着您尚未完成点击操作。

关于使用什么或者问题是什么有什么想法吗？

提前谢谢您!

这是一些示例代码

document.addEventListener("mousemove", function(e){
    var x = e.pageX;
    var y = e.pageY;
});

Answer 1

对于触摸屏输入，您必须使用touch-event API 。这些API包括

• 触摸开始
• 触摸结束
• 触摸取消
• 触摸移动

或者，如果您可以尝试新的 pointer event API。
这样您就可以编写与使用鼠标事件类似的代码。例如

• 鼠标按下 > 指针按下
• 鼠标向上 > 指针向上
• 鼠标移动 > 指针移动

This specification integrates various inputs from mice, touchscreens, and pens, making separate implementations no longer necessary and authoring for cross-device pointers easier. Not to be mistaken with the unrelated "pointer-events" CSS property. -- caniuse

但是，其他浏览器还没有很好地支持它。请参阅pointer's browsers compatibility

幸运的是，有一个填充代码 https://github.com/jquery/PEP