移動端手勢庫設計與實踐

來自專欄 連城

前言

本次給大家分享的是常見的移動端單點觸摸事件的設計思路及實踐。

核心技術

主要就是利用移動端的以下3個觸摸事件，來模擬和實現自定義的手勢操作

• touchstart：手指觸摸到屏幕的一瞬間觸發
• touchmove：手指在屏幕上移動時觸發
• touchend：手指從屏幕上離開時觸發

概念梳理

touch事件觸發時，有3組數據可以獲得觸摸信息，可能大家會對這幾組數據有些混淆，我根據自己的理解來盡量用通俗的語言給大家解釋清楚

• touches：整個屏幕上所有的觸摸點集合
• targetTouches：當前DOM元素上的所有觸摸點集合
• changedTouches：相對上一次觸摸點發生變化的集合

我們先來看一張圖

如圖所示，我們在節點B上綁定touch事件，圓圈代表觸摸點。

此時節點B有3個觸摸點，即targetTouches數組有3項，分別儲存著觸摸點的信息，此時touches和targetTouches是相同的。

當我們將手指3移出節點B（始終保持3個手指觸摸在屏幕上），那麼touchmove事件觸發，targetTouches只剩2項，而touches依然有3項，此時changedTouches只有一項（因為只有手指3改變了）。

然後我們讓所有手指離開屏幕，那麼此時touchend事件觸發，touches只剩0項，targetTouches剩0項，changedTouches有3項（因為3個手指發生了變化）。

好了，理解這些概念，有助於我們理解代碼中何時改去哪個touch數組裡面的值。

思路及實踐

tap

tap可以理解為點擊事件，和click不同的是，移動端的click事件有大約300ms的延遲，這是因為瀏覽器要判斷是否為雙擊事件。

思路

• touchstart：時記錄時間點以及觸摸點的x、y坐標
• touchend：計算此時與開始時的時間差，水平和垂直方向的偏移量

說明：時間差用來判斷用戶觸摸的時長，超過規定時間則tap事件無效；偏移量用來判斷用戶的觸摸事件內是否有過移動的痕迹，這裡我們允許少量的偏移，因為手指可能出現抖動的情況

實現

const tapDefaults = { time: 250, offset: 10}export default function tap (node, a, b) { let st, sx, sy let opts, callback if (typeof a === function) { callback = a opts = Object.assign({}, tapDefaults, b) } else { callback = b opts = Object.assign({}, tapDefaults, a) } node.addEventListener(touchstart, (e) => { e.preventDefault() // 組織瀏覽器默認行為，防止觸摸過程頁面滾動 const touch = e.targetTouches[0] st = e.timeStamp sx = touch.pageX sy = touch.pageY }, false) node.addEventListener(touchend, (e) => { const touch = e.changedTouches[0] if ( // 若為長按，則將時間判定條件更改 e.timeStamp - st <= opts.time && Math.abs(touch.pageX - sx) <= opts.offset && Math.abs(touch.pageY - sy) <= opts.offset ) { callback && callback() } }, false)}

doubletap

即雙擊事件，兩次點擊時間間隔不超過規定時間則視為有效。

思路

• 第一次有效點擊，記錄該狀態，反之重置狀態
• 第二次有效點擊，觸發事件並重置狀態
• 若兩次時間間隔過長，重置狀態

實現

const tapDefaults = { time: 250, offset: 10}function handler (node, inject) { let st, sx, sy node.addEventListener(touchstart, (e) => { e.preventDefault() const touch = e.targetTouches[0] st = e.timeStamp sx = touch.pageX sy = touch.pageY }, false) node.addEventListener(touchend, (e) => { const touch = e.changedTouches[0] inject({ time: e.timeStamp - st, offsetX: Math.abs(touch.pageX - sx), offsetY: Math.abs(touch.pageY - sy) }) }, false)}export function doubletap (node, a, b) { let opts, callback let status = 0 if (typeof a === function) { callback = a opts = Object.assign({}, tapDefaults, b) } else { callback = b opts = Object.assign({}, tapDefaults, a) } handler(node, (info) => { if ( info.time <= opts.time && info.offsetX <= opts.offset && info.offsetY <= opts.offset ) { if (status === 0) { status = 1 // 時間間隔太長則重置狀態 setTimeout(() => { status = 0 }, opts.time) } else if (status === 1) { callback && callback() status = 0 } } else { status = 0 } })}

longtap

即長按，手指按住超過規定時間視為有效，在手指離開時觸發。

思路

• 和tap事件思路一樣，只不過時間的判定條件變更一下，改為超過多長時間才觸發

實現

const longtapDefaults = { time: 350, offset: 10}// 這裡代碼邏輯和tap事件一樣// 更改時間判定為：// e.timeStamp - st > opts.time

press

即按壓事件，按住超過規定時間自動觸發，注意和longtap不同的是，longtap需要等到手指離開時觸發，而press在按壓時間達到規定值，自動觸發，此時手指還在屏幕上。

思路

• touchstart：記錄此時的x、y坐標，並且開啟一個定時器，在規定時間後執行回調，默認是350ms
• touchmove：監聽移動過程，在事件觸發前，若出現偏移量過大，則取消定時器
• touchend：取消定時器

分析：根據以上思路，若按壓時間短，則手指離開時定時器已取消，回調不會觸發。

實現

const pressDefaults = { time: 350, offset: 10}export default function press (node, a, b) { let opts, callback, sx, sy let timer = null if (typeof a === function) { callback = a opts = Object.assign({}, pressDefaults, b) } else { callback = b opts = Object.assign({}, pressDefaults, a) } node.addEventListener(touchstart, (e) => { e.preventDefault() const touch = e.targetTouches[0] sx = touch.pageX sy = touch.pageY timer = setTimeout(() => { callback && callback() }, opts.time) }, false) node.addEventListener(touchmove, (e) => { const touch = e.targetTouches[0] if ( Math.abs(touch.pageX - sx) > opts.offset || Math.abs(touch.pageY - sy) > opts.offset ) { clearTimeout(timer) } }, false) node.addEventListener(touchend, () => { clearTimeout(timer) }, false)}

swipe

即手指滑動事件，應用場景如：輪播圖左右滑動切換，整屏頁面滑動翻頁等，算是移動端最常見的手勢之一了。

思路

• touchstart：記錄時間點和觸摸點位置
• touchmove：實時判斷滑動偏移量
• touchend：計算滑動速度和方向，條件判定是否觸發事件

分析：考慮到需要在滑動過程做一些動畫特效等操作，因此我們將滑動中的事件暴露給用戶自定義，值得注意的是，若是要實時改變滑塊位置的話，最好不要截流或防抖，截流會造成滑動卡頓的現象，而防抖會出現延遲同步滑動操作的情況；另外對滑動速度也進行了處理，原則上用戶滑動距離超過規定後即視為有效，然而為了更好的用戶體驗，我們判定，如果用戶在短時間內滑動速度非常快的話，也視為一次有效的操作，不一定非要滑動很長的距離

實現

const swipeDefaults = { direction: horizontal, // vertical speed: 200, offset: 100, prevent: true, // touchmove: (offset) => {}}export default function swipe (node, a, b) { let opts, callback, sTime, sTouch, eTouch if (typeof a === function) { callback = a opts = Object.assign({}, swipeDefaults, b) } else { callback = b opts = Object.assign({}, swipeDefaults, a) } node.addEventListener(touchstart, (e) => { if (opts.prevent) { e.preventDefault() } sTime = e.timeStamp sTouch = eTouch = e.targetTouches[0] }, false) if (typeof opts.touchmove === function) { node.addEventListener(touchmove, (e) => { eTouch = e.targetTouches[0] if (opts.direction === horizontal) { opts.touchmove(eTouch.pageX - sTouch.pageX) } else { opts.touchmove(eTouch.pageY - sTouch.pageY) } }, false) } node.addEventListener(touchend, (e) => { eTouch = e.changedTouches[0] let time = e.timeStamp - sTime let offset, direction if (opts.direction === horizontal) { offset = eTouch.pageX - sTouch.pageX direction = offset > 0 ? right : left } else { offset = eTouch.pageY - sTouch.pageY direction = offset > 0 ? down : up } if ( Math.abs(offset) >= opts.offset || Math.abs(offset) / time * 1000 >= opts.speed ) { callback && callback(direction) } }, false)}

結束語

通過以上的思路講解和代碼實現，我們完成了一個單點觸控的移動端手勢庫，是不是迫不及待的想要一睹為快、體驗一番。

最後附上本次分享的源碼和文檔：https://github.com/ansenhuang/axe/blob/master/packages/touch/README.md