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

时间:2017-01-04 17:15:05

标签: javascript html5-canvas pointer-events

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

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

我在jsfiddle创建了一个示例,因此您可以看到它。

2 个答案:

答案 0 :(得分:2)

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

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

答案 1 :(得分:1)

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

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

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