diff --git a/packages/rrweb/src/record/observer.ts b/packages/rrweb/src/record/observer.ts index bdfaae54..241c0e56 100644 --- a/packages/rrweb/src/record/observer.ts +++ b/packages/rrweb/src/record/observer.ts @@ -20,6 +20,7 @@ import { mousePosition, mouseInteractionCallBack, MouseInteractions, + PointerTypes, listenerHandler, scrollCallback, styleSheetRuleCallback, @@ -236,11 +237,17 @@ function initMouseInteractionObserver({ if (isBlocked(target, blockClass, blockSelector, true)) { return; } - let pointerType = null; + let pointerType: PointerTypes | null = null; let e = event; if ('pointerType' in e) { - pointerType = (e as PointerEvent).pointerType; // touch / pen / mouse - if (pointerType === 'touch') { + Object.keys(PointerTypes) + .forEach((pointerKey: keyof typeof PointerKeys) => { + if ((e as PointerEvent).pointerType === pointerKey.toLowerCase()) { + pointerType = PointerTypes[pointerKey]; + return; + } + }); + if (pointerType === PointerTypes.Touch) { if (MouseInteractions[eventKey] === MouseInteractions.MouseDown) { // we are actually listening on 'pointerdown' eventKey = 'TouchStart'; @@ -250,14 +257,14 @@ function initMouseInteractionObserver({ // we are actually listening on 'pointerup' eventKey = 'TouchEnd'; } - } else if (pointerType == 'pen') { + } else if (pointerType == PointerTypes.Pen) { // TODO: these will get incorrectly emitted as MouseDown/MouseUp } } else if (legacy_isTouchEvent(event)) { e = event.changedTouches[0]; - pointerType = 'touch'; + pointerType = PointerTypes.Touch; } - if (pointerType) { + if (pointerType !== null) { currentPointerType = pointerType; } else if (MouseInteractions[eventKey] === MouseInteractions.Click) { pointerType = currentPointerType; @@ -273,7 +280,7 @@ function initMouseInteractionObserver({ id, x: clientX, y: clientY, - ...(pointerType && { pointerType }), + ...(pointerType !== null && { pointerType }), }); }; }; diff --git a/packages/types/src/index.ts b/packages/types/src/index.ts index 2c047948..66014572 100644 --- a/packages/types/src/index.ts +++ b/packages/types/src/index.ts @@ -362,6 +362,12 @@ export enum MouseInteractions { TouchCancel, } +export enum PointerTypes { + Mouse, + Pen, + Touch, +} + export enum CanvasContext { '2D', WebGL, @@ -404,7 +410,7 @@ type mouseInteractionParam = { id: number; x: number; y: number; - pointerType?: string; + pointerType?: PointerTypes; }; export type mouseInteractionCallBack = (d: mouseInteractionParam) => void;