在iOS上禁用HTML画布绘制的滚动/滑动动作

Question

我有一个带有鼠标和触摸事件的HTML画布，可以在其上进行绘制。

我使用css touch-action：画布上的none样式在绘制时禁止在设备上滚动。

但是，它仅适用于非IOS设备。在IOS设备上的任何浏览器上，它仍会执行滚动/滑动操作，并且很难正确绘制。

它几乎似乎是一个IOS功能。仍然可以滚动/滑动轻松适合屏幕显示的网页。

有什么办法解决这个问题？

Answer 1

自己经历了一年的问题后，我终于设法解决了这个问题。

解决方案：在CANVAS ELEMENT上处理touchstart，touchmove，touchend，touchcancel事件和调用event.preventDefault（）。如果气泡超出canvas元素，它将滚动。

例：

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()})

Answer 2

您能否验证此页面是否适合您？http://bencentra.com/code/2014/12/05/html5-canvas-touch-events.html

这曾经在我的 iOS 上运行良好，直到更新 11.3。更新后，拖动时画布始终滚动。在其他操作系统中，解决方案是touch-action:none，或者在 Javascript 世界中：event.preventDefault()。但是，正如您在上面页面后面的代码中看到的，Javascript 选项不起作用。

PS 我必须强调一点，这在 iOS 11.3 更新之前是有效的。