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

Question

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

我正在处理pointerdown,pointermove和pointerup画布元素上的事件。当我使用鼠标时，我的笔记本电脑上的 Chrome 一切正常。但是，当我在平板电脑上尝试时，我只收到几个pointermove事件（2-5），然后才收到pointercancel事件，然后是pointerout和pointerleave。

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

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

使用指针事件在画布元素上绘制时如何禁用整个页面的滚动？

Answer 1

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

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