用TypeScript开发手势库 - (3)统一化Mouse和Touch事件

any-touch 一个手势库

往期目录

用 TypeScript 开发手势库 - (1)web开发常用手势有哪些?

用 TypeScript 开发手势库 - (2)web开发常用手势有哪些?

不到30行, 用any-touch实现一个drawer

简单看下架构

用TypeScript开发手势库 - (3)统一化Mouse和Touch事件

实现输入格式统一(input)

为了同时支持鼠标和touch设备, 我们第一步把2种设备产生数据统一化, 统一化后的数据我们统一叫他input.

4个基础,7个快捷

input包含11个字段,4个基础字段,7个快捷字段, 这些都是为下一步进行计算处理(computed)使用.

4个基础字段

input包含4个基础字段:eventType / point / changedPoints / nativeEvent, 接下来依次解释.

eventType

eventType可以理解为输入状态, 如touchstart/mousedown对应start, touchmove/mousemove对应move, touchend/mouseleave对应end, touchcancel对应cancel, 总计4种状态.

point

触点信息, 存储当前触点相对浏览器窗口左上角的坐标(clientX, clientY), point是个数组, 存储当前的所有触点.

changedPoints

发生变化的触点信息, 是个数组, 存储着上一次触点相对当前触点发生变化的触点(初看有些绕, 如不明可留言.).

nativeEvent

如果是touch设备, 那么对应touchEvent, 鼠标对应MouseEvent.

处理touchEvent

export default (event: TouchEvent): any => {
    const point = Array.from(event.touches).map(({clientX,clientY})=>({clientX,clientY}));
    const changedPoints = Array.from(event.changedTouches).map(({clientX,clientY})=>({clientX,clientY}));
    const eventType = event.type.replace('touch', '');
    return {
        eventType,
        changedPoints,
        point,
        nativeEvent: event,
    };
};

处理mouseEvent

let prevPoints: { clientX: number, clientY: number }[];
let isPressed = false;
// 默认MouseEvent中对type声明仅为string
export default (event: MouseEvent): BaseInput | void => {
    let { clientX, clientY, type, button } = event;
    const changedPoints = prevPoints || [{ clientX, clientY }];

    let points = [{ clientX, clientY }];
    prevPoints = [{ clientX, clientY }];

    // 必须左键
    if ('mousedown' === type) {
        if (0 === button) {
            isPressed = true;
        } else {
            return;
        }
    }

    if ('mousemove' === type) {
        if (!isPressed) return;
    } else if ('mouseup' === type) {
        if (isPressed) {
            points = [];
        } else {
            return;
        };
        isPressed = false;
    }

    const MAP = {
        mousedown: 'start',
        mousemove: 'move',
        mouseup: 'end'
    };

    return {
        eventType: <eventType>MAP[<'mousedown' | 'mousemove' | 'mouseup'>type],
        changedPoints,
        points,
        nativeEvent: event
    };
};

源码