用TypeScript開發手勢庫 - (3)統一化Mouse和Touch事件

時間 2019-11-17

標籤 typescript 開發手勢統一化 mouse touch 事件简体版

原文原文鏈接

any-touch 一個手勢庫git

往期目錄

用 TypeScript 開發手勢庫 - (1)web開發經常使用手勢有哪些?github

用 TypeScript 開發手勢庫 - (2)web開發經常使用手勢有哪些?web

不到30行, 用any-touch實現一個drawertypescript

簡單看下架構

實現輸入格式統一(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是個數組, 存儲當前的全部觸點.post

changedPoints

發生變化的觸點信息, 是個數組, 存儲着上一次觸點相對當前觸點發生變化的觸點(初看有些繞, 如不明可留言.).ui

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
    };
}; 
複製代碼