IT虾米网

javascript之在 Canvas 上拖动 JavaScript

jiqing9006 2024年09月03日 程序员 16 0

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

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

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

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

提前谢谢您!

这是一些示例代码

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

请您参考如下方法:

对于触摸屏输入,您必须使用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


评论关闭
IT虾米网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!