我刚好碰到过类似的情况！你猜对了，pointercancel触发确实是因为浏览器的默认滚动行为干扰了Pointer Events。之前在触摸事件里用preventDefault()管用，但Pointer Events的机制有点不一样，得结合CSS属性和事件处理一起搞才行。

下面是我验证有效的解决方案：

1. 用CSS touch-action 属性直接禁用默认触摸行为 #

这是最关键的一步。touch-action是专门用来控制浏览器对触摸/Pointer事件的默认行为的CSS属性，比只在事件里调用preventDefault()更可靠，因为它能提前告诉浏览器不要处理滚动、缩放这些行为。

给你的Canvas元素加上这个样式：

canvas {
  touch-action: none;
}

touch-action: none会完全禁用该元素上的所有浏览器默认触摸行为（滚动、双指缩放、双击缩放等），刚好适合绘图场景。如果你之后需要保留某些行为，比如允许横向滚动，可以用touch-action: pan-x这类更具体的值，但绘图的话none就够用了。

2. 在pointerdown事件中调用event.preventDefault() #

虽然touch-action已经能解决大部分问题，但为了兼容一些旧版浏览器或者特殊场景，在pointerdown事件触发时立刻调用preventDefault()，确保彻底阻止默认行为的触发：

canvas.addEventListener('pointerdown', (e) => {
  e.preventDefault();
  // 你的绘图初始化逻辑，比如记录起点、设置笔刷状态等
});

不用在pointermove里重复调用，因为pointerdown时阻止默认行为后，后续的pointermove就不会触发浏览器的滚动逻辑了。

为什么之前的方法在Pointer Events里无效？ #

触摸事件里，touchstart/touchmove调用preventDefault()能阻止滚动，但Pointer Events是统一了鼠标、触摸、笔输入的事件模型，浏览器的默认行为触发时机更早。touch-action是W3C针对Pointer Events专门设计的属性，能从根源上告诉浏览器不要处理这些默认行为，比事件层面的阻止更高效。

按照这两步操作后，你在平板上测试应该就不会触发pointercancel了，能流畅地在Canvas上绘图啦！

内容的提问来源于stack exchange，提问作者szimek