如何在IOS上禁用html画布绘图的滚动/滑动操作?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (183)

我有一个HTML画布用鼠标和触摸事件来绘制它。

我使用CSS触摸-行动:无画布上的样式,以便在绘图时禁用设备上的滚动。

然而,它只适用于非IOS设备。在iOS设备上的任何浏览器上,它仍然会执行滚动/滑动操作,因此很难正确绘制。

这似乎是iOS的一个功能。一个网页,很容易适合在屏幕上仍然可以滚动/滑动。

有办法解决这个问题吗?

提问于
用户回答回答于

可以参考:http://bencentra.com/code/2014/12/05/html5-canvas-touch-events.html

这曾经在我的iOS上很好的工作,直到更新11.3。更新后,画布总是在拖动时滚动。在其他开放源码软件中,解决方案是touch-action:none,或者在Javascript世界:event.preventDefault()。但是,正如您在上面页面后面的代码中所看到的,Javascript选项不起作用。

用户回答回答于

解决方案:处理画布元素上的TouchStart、TouchMove、TouchEnd、TouchCancel事件和调用Event.Default()。如果它的气泡超出画布元素,它将滚动。

例子:

var canvas_dom = // make this your canvas DOM element
canvas_dom.addEventListener("touchstart",  function(event) {event.preventDefault()})
canvas_dom.addEventListener("touchmove",   function(event) {event.preventDefault()})
canvas_dom.addEventListener("touchend",    function(event) {event.preventDefault()})
canvas_dom.addEventListener("touchcancel", function(event) {event.preventDefault()})

扫码关注云+社区

领取腾讯云代金券