html - 在 ios 上禁用 html Canvas 绘图的滚动/滑动操作

Question

我有一个 html Canvas ，带有鼠标和触摸事件，可以在上面绘制。

我在 Canvas 上使用 css touch-action: none 样式来禁用绘图时在设备上的滚动。

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

这几乎像是 IOS 的一项功能。很容易适应屏幕的网页仍然可以滚动/滑动。

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

Answer 1

在我自己遇到这个问题一年之后，我终于设法解决了它。

解决方案:处理 touchstart、touchmove、touchend、touchcancel 事件，并在 CANVAS 元素上调用 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()})