pointermove事件为什么在触摸屏中会中断

100 阅读1分钟

最近在升级项目,想彻底去删除老旧的touchEvent,mouseEvent等事件。

选择使用pointerEvent统一交互行为。

在PC中pointerXXX事件都可以正常使用。 当使用浏览器模拟触屏时问题来了, pointermove会中断并触发pointerleave,pointercancel事件。

各种搜素无结果,只能自己猜问题了。

  1. 是不是其他DOM元素的交互影响的, 关闭所有DOM交互pointer-event:none,删除所有无关DOM,无果。
  2. 移动端会有缩放/滚动等浏览器手势操作,会不会是这个影响的。 结果是的对。

关闭浏览器内置DOM操作有个css属性 touchAction = 'none',设置后,可以正常使用pointermove了。

不设置touchAction情况下,浏览器开发环境模拟触摸操作时,在处理pointer事件时(点击移动),会发触发pointercancel,pointerleave停止当前所有事件,为内置的滚动手势操作做准备。