在ios上禁用html画布绘图的滚动/滑动操作
在ios上禁用html画布绘图的滚动/滑动操作
提问于 2018-03-01 18:17:44
我有一个带有鼠标和触摸事件的html画布在上面绘制。
我在画布上使用css touch-action: none样式来禁止在绘图时在设备上滚动。
但是，它只适用于非IOS设备。在IOS设备上的任何浏览器上，它仍然会执行滚动/滑动操作，并且很难正确绘制。
它看起来几乎是IOS的一项功能。一个很容易放在屏幕上的网页仍然可以滚动/滑动。
有没有办法解决这个问题？
回答 2
Stack Overflow用户
发布于 2018-07-02 05:56:49
在我自己遇到这个问题一年后，我终于设法解决了它。
解决方案:在画布元素上处理touchstart、touchmove、touchend、touchcancel事件，并调用event.preventDefault()。如果它在画布元素之外冒泡，它将滚动。
示例：
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()})Stack Overflow用户
发布于 2018-04-12 22:22:40
您能否验证此页面是否适合您？http://bencentra.com/code/2014/12/05/html5-canvas-touch-events.html
在更新11.3之前，这在我的iOS上工作得很好。更新后，画布总是在拖动时滚动。在其他操作系统中，解决方案是touch-action:none，或者在Javascript世界中：event.preventDefault()。但是，正如您在上面页面后面的代码中所看到的，Javascript选项不起作用。
附言:在iOS 11.3更新之前，我再怎么强调也不为过。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/49047414
复制相关文章
相似问题