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

Question

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

5

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

我正在处理画布元素上的pointerdown、pointermove和pointerup事件。当我使用鼠标在Chrome浏览器上运行时，一切都很正常。然而，当我在平板电脑上尝试时，我只收到了几个pointermove事件（2-5），然后就会收到pointercancel事件，接着是pointerout和pointerleave事件。

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

为了在使用触摸事件时禁用滚动，我在touchstart和touchmove事件处理程序中调用event.preventDefault()，但这种解决方案似乎在使用指针事件时无效。

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

- szimek

你尝试过使用 .stopPropagation() 吗？ - Randy Casburn

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Marius · Accepted Answer

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

要了解更精细的选项，请查看MDN文章touch-action。