在iOS上禁用HTML画布绘制的滚动/滑动动作 [英] Disable scroll/swipe action for html canvas drawing on ios

问题描述

我有一个 html画布，其中带有鼠标和触摸事件以在其上绘制。

I have a html canvas with mouse and touch events to draw on it.

我使用css touch-action：画布上没有样式来禁用绘图时设备上的滚动。

I use css touch-action: none style on the canvas to disable scrolling on the device while drawing.

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

However it only works for non IOS devices. On any browser on an IOS device it still does a scroll/swipe action and makes it tough to draw correctly.

这似乎是IOS的一项功能。仍然可以滚动/滑动轻松适应屏幕上的网页。

It almost seems to be an IOS feature. A web page that easily fits on the screen can still be scroll/swiped.

是否可以解决此问题？

推荐答案

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

After a year of having this problem myself, I finally managed to fix it.

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

Solution: Handle the touchstart, touchmove, touchend, touchcancel events, and call event.preventDefault(), ON THE CANVAS ELEMENT. If it bubbles beyond the canvas element, it will scroll.

示例：

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

这篇关于在iOS上禁用HTML画布绘制的滚动/滑动动作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！