fix#71 fix touch event listener and throttle touch move callback

src/record/observer.ts

@@ -8,6 +8,7 @@ import {
  getWindowWidth,
  isBlocked,
  isAncestorRemoved,
+ isTouchEvent,
 } from '../utils';
 import {
  mutationCallBack,
@@ -271,7 +272,7 @@ function initMutationObserver(
  return observer;
 }
 
-function initMousemoveObserver(cb: mousemoveCallBack): listenerHandler {
+function initMoveObserver(cb: mousemoveCallBack): listenerHandler {
  let positions: mousePosition[] = [];
  let timeBaseline: number | null;
  const wrappedCb = throttle(() => {
@@ -285,9 +286,12 @@ function initMousemoveObserver(cb: mousemoveCallBack): listenerHandler {
  positions = [];
  timeBaseline = null;
  }, 500);
- const updatePosition = throttle<MouseEvent>(
+ const updatePosition = throttle<MouseEvent | TouchEvent>(
  evt => {
- const { clientX, clientY, target } = evt;
+ const { target } = evt;
+ const { clientX, clientY } = isTouchEvent(evt)
+ ? evt.changedTouches[0]
+ : evt;
  if (!timeBaseline) {
  timeBaseline = Date.now();
  }
@@ -304,7 +308,13 @@ function initMousemoveObserver(cb: mousemoveCallBack): listenerHandler {
  trailing: false,
  },
  );
- return on('mousemove', updatePosition);
+ const handlers = [
+ on('mousemove', updatePosition),
+ on('touchmove', updatePosition),
+ ];
+ return () => {
+ handlers.forEach(h => h());
+ };
 }
 
 function initMouseInteractionObserver(
@@ -313,12 +323,14 @@ function initMouseInteractionObserver(
 ): listenerHandler {
  const handlers: listenerHandler[] = [];
  const getHandler = (eventKey: keyof typeof MouseInteractions) => {
- return (event: MouseEvent) => {
+ return (event: MouseEvent | TouchEvent) => {
  if (isBlocked(event.target as Node, blockClass)) {
  return;
  }
  const id = mirror.getId(event.target as INode);
- const { clientX, clientY } = event;
+ const { clientX, clientY } = isTouchEvent(event)
+ ? event.changedTouches[0]
+ : event;
  cb({
  type: MouseInteractions[eventKey],
  id,
@@ -328,7 +340,7 @@ function initMouseInteractionObserver(
  };
  };
  Object.keys(MouseInteractions)
- .filter(key => Number.isNaN(Number(key)))
+ .filter(key => Number.isNaN(Number(key)) && !key.endsWith('_Departed'))
  .forEach((eventKey: keyof typeof MouseInteractions) => {
  const eventName = eventKey.toLowerCase();
  const handler = getHandler(eventKey);
@@ -499,7 +511,7 @@ export default function initObservers(o: observerParam): listenerHandler {
  o.inlineStylesheet,
  o.maskAllInputs,
  );
- const mousemoveHandler = initMousemoveObserver(o.mousemoveCb);
+ const mousemoveHandler = initMoveObserver(o.mousemoveCb);
  const mouseInteractionHandler = initMouseInteractionObserver(
  o.mouseInteractionCb,
  o.blockClass,

src/replay/index.ts

@@ -492,6 +492,8 @@ export class Replayer {
  }
  break;
  case MouseInteractions.Click:
+ case MouseInteractions.TouchStart:
+ case MouseInteractions.TouchEnd:
  /**
  * Click has no visual impact when replaying and may
  * trigger navigation when apply to an <a> link.

src/types.ts

@@ -184,7 +184,7 @@ export enum MouseInteractions {
  Focus,
  Blur,
  TouchStart,
- TouchMove,
+ TouchMove_Departed, // we will start a separate observer for touch move event
  TouchEnd,
 }
 

src/utils.ts

@@ -151,3 +151,9 @@ export function isAncestorRemoved(target: INode): boolean {
  }
  return isAncestorRemoved((target.parentNode as unknown) as INode);
 }
+
+export function isTouchEvent(
+ event: MouseEvent | TouchEvent,
+): event is TouchEvent {
+ return Boolean((event as TouchEvent).changedTouches);
+}