如何使用元素上的指针事件禁用整个页面的滚动？

Question

我有一个允许在画布上绘图的库。目前，它支持鼠标和触摸事件。我也想添加对指针事件的支持。

我在canvas元素上处理pointerdown，pointermove和pointerup个事件。当我使用鼠标时，我的笔记本电脑上的Chrome工作正常。但是，当我在平板电脑上试用它时，我只会收到一些pointermove个事件（2-5），然后才能获得pointercancel个事件，然后是pointerout和pointerleave

我猜浏览器正在触发pointercancel，因为在画布上移动我的手指也会触发整个页面的滚动。

要在使用触摸事件时禁用滚动，我在event.preventDefault()和touchstart事件的处理程序中调用touchmove，但此解决方案似乎不适用于指针事件。

当我在使用指针事件时绘制canvas元素时，如何禁用整页的滚动？

Answer 1

您是否尝试过CSS属性touch-action: none？它禁用元素上的任何类型的用户代理行为（如滚动）。

有关更细粒度的选项，请查看touch-action的MDN文章。