preventdefault 和 stoppropagation 不适用于 pointermove

Question

我正在开发一个可以在 HTML5 canvas 中绘图的应用程序，但我无法通过手机或平板电脑执行此操作。

我无法避免浏览器的原生滚动或chrome按下时刷新

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

Answer 1

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

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

Answer 2

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

如果您设置触摸操作："none"，则本机浏览器处理永远不会 运行。相反，正如您所报告的，没有触摸操作设置（相当于 "auto" 的默认值）将不起作用，因为 Chrome 忽略了对 pointerMove 上的 preventDefault() 的调用，并且仍然调用 pointerCancel - 一个错误。

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