拖上 canvas JavaScript

Question

我一直在使用 mousedown、mousemove 和其他触摸事件，但其中 none 似乎解决了我的问题。

我的目标是尝试获取跟随用户手指或鼠标的对象。我尝试使用 mousemove，它起作用了，但只在计算机上起作用。在移动设备上它失败了，只是在点击开始之后，没有别的。

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

关于使用什么的任何想法，或者问题是什么？

提前致谢！

这是一些示例代码

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

Answer 1

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

触摸启动
触摸端
触摸取消
触摸移动

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

鼠标按下 > 指针按下
mouseup > pointerup
mousemove > pointermove

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

幸运的是，有一个 polyfill https://github.com/jquery/PEP

拖上 canvas JavaScript

Dragging on canvas JavaScript

javascript

canvas

drag

mousemove

mousedown