在画布上拖动JavaScript

时间:2017-03-27 14:22:17

标签: javascript canvas drag mousemove mousedown

我一直在使用mousedownmousemove和其他触摸事件,但似乎没有一个能够解决我的问题。

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

我认为问题可能是因为在计算机上,如果点击并拖动鼠标,计算机将其视为拖动。在移动设备上,拖动可能意味着您没有使用水龙头。

关于使用什么或问题是什么的任何想法?

提前谢谢!

这是一些示例代码

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

1 个答案:

答案 0 :(得分:1)

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

  • touchstart
  • touchend
  • touchcancel
  • touchmove

或者,如果您可以尝试使用新的pointer event API 有了它,您可以编写类似于使用鼠标事件的代码。 e.g。

  • mousedown> pointerdown
  • mouseup> pointerup
  • mousemove> pointermove
  

该规范集成了来自鼠标,触摸屏和笔的各种输入,使得不再需要单独的实现,并且更容易为跨设备指针创作。不要误解与无关的"指针事件" CSS属性。 - caniuse

然而,其他浏览器尚未得到很好的支持。见pointer's browsers compatibility

幸运的是,https://github.com/jquery/PEP

有一个polyfill