【问题标题】:Dragging on canvas JavaScript在画布上拖动 JavaScript
【发布时间】:2017-03-27 14:22:17
【问题描述】:

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

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

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

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

提前谢谢你!

这是一些示例代码

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

【问题讨论】:

  • 我们需要查看您的代码以提供帮助。
  • @Feathercrown 我在移动设备上,所以代码看起来没有格式化,但这就是它的要点。我编辑了帖子。

标签: javascript canvas drag mousemove mousedown


【解决方案1】:

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

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

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

  • mousedown > 指针向下
  • mouseup > pointerup
  • 鼠标移动>指针移动

此规范集成了来自鼠标、触摸屏和笔的各种输入,不再需要单独的实现,并且更容易编写跨设备指针。不要误认为不相关的“指针事件”CSS 属性。 -- caniuse

但是,其他浏览器还没有很好地支持它。见pointer's browsers compatibility

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

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-07-12
    • 2012-08-16
    • 2022-10-07
    • 1970-01-01
    • 2022-01-26
    相关资源
    最近更新 更多