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

Posted 2021-04-15

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

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

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

答案

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

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

另一答案

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

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

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