preventdefault 和 stoppropagation 不适用于指针移动答案

【问题标题】：preventdefault and stoppropagation not working with pointermovepreventdefault 和 stoppropagation 不适用于指针移动
【发布时间】：2017-12-28 15:02:24
【问题描述】：

我正在制作一个在 HTML5 canvas 中绘制的应用程序，但我无法在手机或平板电脑上进行。

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

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

【问题讨论】：

请在问题本身的minimal reproducible example 中提供所有相关代码，而不是在第三方网站上。

标签： javascript html5-canvas pointer-events

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

这是否曾被报告为 Chrome 错误？如果是这样，你能链接这个问题吗？
Firefox 显示相同的行为。