防止默认和停止传播不使用pointermove

问题描述 投票:0回答:2

我正在制作一个应用程序来绘制HTML5 canvas,但我无法通过手机或平板电脑进行。

按下时,我无法避免浏览器的本机滚动或Chrome刷新

我在jsfiddle中创建了一个例子,你可以看到它。

javascript html5-canvas pointer-events
2个回答
2
投票

要禁止默认UA行为,您需要将CSS属性touch-action: none添加到canvas元素。

touch-action指定HTML元素是否以及如何响应手势。使用touch-action: none不会触发UA行为(例如拖动或缩放)。默认属性是touch-action: auto,它允许触发所有UA行为。


1
投票

这看起来像是一个真正的Chrome错误,我将使用您的示例代码进行报告。如果要在JavaScript中动态决定是否使用自己的代码处理pointerMove而不是允许本机浏览器处理,则在CSS中设置触摸操作不是解决方案。

如果设置touch-action:“none”,则本机浏览器处理将永远不会运行。相反,正如您所报道的那样,没有触摸操作设置(相当于默认的“自动”)将无效,因为Chrome会忽略对preventMove上的preventDefault()调用并仍然调用pointerCancel - 一个错误。

请注意,如果您为touchMove添加了一个侦听器,则使用passive:false标志,则preventDefault()将按预期工作,从而避免使用touchCancel。但是,您必须使用单独的鼠标事件和触摸事件侦听器,这是您要通过使用指针事件来避免的。

© www.soinside.com 2019 - 2024. All rights reserved.