在之前的文章中我們一起實作了一個輪播圖的基本效果，我們可以用滑鼠去把它來回拖拽，效果上它已經是一個可以做到無盡輪播的輪播圖功能了，

但是我們會發現，我們滑鼠在圖片上任何的動作都會觸發到拖拽，并且對圖片進行位移的效果，這個其實并不是一個我們最佳實作效果，

在使用滑鼠場景下，因為我們滑鼠是放在桌面上的，而且滑鼠本身也是有一定的重量，所以當我們點擊的時候，一般是不會出現任何滑鼠的移動信號的，

但是如果是在手機的觸屏上，就算我們手再穩，都會出現一定的移位的，這個就是跟我們的手指和螢屏的接觸面積、手指是柔軟程度等導致的問題，當我們點擊發生位移的時候，它發生的時間序列都會是我們之前監聽的 down、move 和 up這樣的程序，

在觸屏上的事件就是 touch、start、move 和 end，其實和滑鼠的 down、move 和 up 的性質是差不多的，但是我們也會發現滑鼠和觸屏是不太一樣的，我們前面實作的輪播圖還有一個非常大的問題，就是根本沒有去支持觸屏的，

在現代網頁應用開發的場景下，很多時候我們都需要一些功能是可以在電腦和移動端上同時可用的，所以我們是很有必要讓我們的輪播圖可在觸屏和滑鼠上有統一的體驗，同時也可以讓我們的代碼去支持基本的手勢區分，比如說點一下和劃一下等等這些區分，

手勢基本知識

所以接下來我們先了解一下手勢的一些基本知識，讓我們了解到怎么去區分點擊和拖拽移動的行為，

這里我們需要使用 start、move 和 end 這三種場景來進行抽象，同時我們也把滑鼠的 down、move 和 up 也統一抽象到觸屏下的 start、move 和 end 的模型里面，

當然我們還有 pointer 事件，這些也是可以統一抽象到這個模型里面，

我們先來一起整理一下手勢體系里面有什么：

start
- 是第一個發生的事件
tap
- 接著我們如果直接點擊螢屏，就是一個 tap 的事件
- 它與 click 是一個比較相似的事件
pan start
- 點擊后我們沒有把手抬起來，并且發生了一個移動的行為就是一個 pan start，
- 一般來說在識別這個事件的時候，我們會允許一個較低的誤差，在 Retina 屏上我們會允許一個 10px 容錯范圍，如果是一倍屏就是 5px，三倍屏就是 15px，
- 那么 pan 其實是攝像機領域中的專業詞，是移動攝像機的意思，而這里我們表示的是一個比較緩慢的觸點推移，
pan
- 一開始移動的時候會觸發 pan start，之后每一次移動都會觸發一個 pan 事件
pan end
- 移動停止時觸發的事件
flick
- 如果我們在移動結束的時候達到一定的速度，我們就會認為用戶進行了一次清掃或者劃動的一個行為，并且會觸發一個 flick / swipe 事件，
press start
- 當我們去點擊后停留在觸屏上的時候，就會觸發一個長按的事件
- 這個長按是通過判定我們停留超過 0.5 秒的時間
- 超過這個時間我們就判定這個行為是一個按壓而不是輕點
- 這種按壓的動作就會觸發一些事件，比如說彈出一個選單
- 但是如果我們在按壓動作的時候發生一個移動 10px 以上的話，就會觸發我們之前的 pan start 事件
- 這種手勢是我們去設計手勢庫的時候經常會遺漏的一種
press end
- 如果我們老老實實按住螢屏，經過一定時間之后手再松開，就會發生一個 press end 的事件
- 有一些事件也是再這個 press end 的時候觸發的，比如說我們有一個按鈕，我們控制它是按下去的時候觸發，還是按完之后松開的時候觸發

這個就是我們基礎手勢庫的體系，當然我們沒有包含雙指手勢，

實作滑鼠操作

首先我們來創建一個新的專案目錄，然后在這個目錄里面創建一個新的 JavaScript 檔案，然后我們就在這個檔案里面嘗試實作我們的手勢，

首先還是先去實作一個滑鼠的操作，假設我們使用 document.documentElement 取到一個容器的元素，它代表 HTML 元素，

這個時候對獲取到的 element 去做事件監聽，而在最外層我們就只監聽一個 mousedown 的事件，

在 mousedown 的回呼函式里面，我們就可以去添加其他的事件，那么這里分別寫兩個事件的處理函式，一個是 mousemove，一個就是 mouseup，

這里與我們的 carousel 組件的實作一樣，mousemove 和 mosueup 都會在 mousedown 的時候被監聽，然后是在 mouseup 的時候被移出，

這里我們不需要給 addEventListener 傳第三個引數的，

不過我們可以了解一下，第三個引數到底是什么，這個引數就是 options，而 options 里面可以加三個引數，

一個是用于啟用捕捉模式的 capture
一個是控制只觸發一次的 once
最后一個就是控制這個里面是否可以 preventDefault，是同步觸發還是異步觸發的引數叫 passive，

然后我們在 mousemove 的函式中列印一下當滑鼠點擊時的 X 和 Y 坐標，這里使用 event.clientX 和 event.clientY即可獲得這兩個坐標，我們也不關心其他相關的資訊，

這樣我們就完成了 mouse 事件的抽象，具體代碼如下：

let element = document.documentElement;

element.addEventListener('mousedown', event => {
  let mousemove = event => {
    console.log(event.clientX, event.clientY);
  };

  let mouseup = event => {
    element.removeEventListener('mousemove', mousemove);
    element.removeEventListener('mouseup', mouseup);
  };

  element.addEventListener('mousemove', mousemove);
  element.addEventListener('mouseup', mouseup);
});

接下來，我們在根目錄建立一個 gesture.html 檔案，然后引入 gesture.js，最后在瀏覽器跑起來看看，

當我們點擊并且拖動的時候，console 中列印出了一堆數字，這樣就證明 mousemove 被正確的觸發了，

實作觸屏操作

首相我們滑鼠中的 mouse 事件是無法被轉換成觸屏事件的，但是大家經常使用的 click 這類更高級的事件是可以監聽到的，

像 mousedown、mouseup、mousemove 這些在移動端都是有獨立的觸屏事件系列的，

在 touch 系列里面一樣有三個對應的事件，touchstart、touchmove、touchend，他們對應的就是 mousedown、mousemove、mouseup，

所以對應的寫法就是下面這樣：

element.addEventListener('touchstart', event => {});

element.addEventListener('touchmove', event => {});

element.addEventListener('touchend', event => {});

盡管我們看起來滑鼠與觸屏是比較相似的，但是 Touch 系列的事件與 mouse 系列的事件是不一樣的，touch 事件只要我們 start 后，就一定會觸發到 move，所以 move 和 start 一定會觸發在同一個元素上，不管我們手的位置移動到哪里，這樣的話我們就不需要像 mouse 一樣，在mousedown 監聽開始之后再去監聽 mousemove，

這是因為我們滑鼠沒有按任何按鍵都是可以在瀏覽器頁面中移動的，而觸屏就不一樣，我們沒有把手指按到螢屏上是無法觸發任何移動事件的，

另外的一個不同就是，touch 系列的事件 event 是有多個觸點的物件的，這是因為我們觸屏上是支持多指手勢的，在 event 之中是有一個 changedTouches 這樣的事件的，這個里面是一個陣列的結構，

在 mouse 系列里面的 event 是可以直接拿到 clientX 和 clientY 的，而在 touch 系列里面的 event 是有多個觸點，所以需要在 changedTouches 的陣列里面找到某一個觸點，再從觸點中才能拿到對應的 clientX 和 clientY，

element.addEventListener('touchstart', event => {
  console.log(event.changedTouches);
});

這里我們可以列印出來看一下：

明顯看到，呼叫 event 中的 changedTouches，回傳的是一個 TouchList 物件，而這個物件中就有多個 Touch 物件，每一個里面都有這個觸點相關的所有資訊，

這里面其實還有一個非常神奇的東西，就是 identifier，那么這個 identifier 是用來做什么的呢？其實當我們去觸發 touchstart 的時候，我們是可以拿到 touchstart 的這個點的資訊的，但是某一個點在 move 的時候，我們沒有辦法知道是哪一個點在 move，所以我們需要在每一個點需要一個唯一的識別符號去追蹤它，

所以 touchstart、touchmove 和 touchend 各自都有一個識別符號，而這個符就是 touch 的唯一 ID，

知道了 touch 事件的資料結構，我們可以使用這個結構獲得與 mouse 事件系列一樣的資料，那么如果我們需要獲得每一個觸點的所在坐標，我們就可以回圈 TouchList 陣列，訪問到每一個 Touch 物件，從中獲得它們的 clientX 和 clientY 值，

這里無論是 start、move 還是 end 都是有 changedTouches 這個標志的，所以在每個事件中的 event 都是可以獲得它們對應的 changedTouches 中的 TouchList 物件，

element.addEventListener('touchstart', event => {
  for (let touch of event.changedTouches) {
    console.log(touch.clientX, touch.clientY);
  }
});

element.addEventListener('touchmove', event => {
  for (let touch of event.changedTouches) {
    console.log(touch.clientX, touch.clientY);
  }
});

element.addEventListener('touchend', event => {
  for (let touch of event.changedTouches) {
    console.log(touch.clientX, touch.clientY);
  }
});

這樣我們就和我們滑鼠事件一樣，能獲得某一個點的坐標，

這里我們需要注意的是，touch 事件里面比滑鼠事件多了一個事件叫 touchcancel，那么 cancel 和 end 有什么區別呢？Cancel 表示的是我們手指 touch 的點的序列被例外情況所結束了，

我們正常的序列就是一個 start，接著一堆的 move，最后是一個 end，如果我們代碼中加入一個 3 秒的延遲后輸出一個 alert 彈窗，那么當我們手指在移動的程序中被彈窗所打斷了，這個時候就會出現一個 touchcancel 的事件，而沒有出現一個正常的 touchend 的事件，諸如此類的系統操作都有可能會打斷我們的 touch 事件的序列，cancel 事件就會替代了 end 事件，

觸屏事件是會多出一個 touchcancel 事件，而滑鼠事件是沒有這樣的情況的，

實作通用監聽

寫到這里我們已經有一個基本的 touch 系列的抽象，接下來我們就要去考慮一下，要怎么寫一個通用的 gesture 手勢的邏輯，

首先我們想要達到的效果，就是無論用戶是用滑鼠操作的，還是在移動端使用觸屏操作的，都會呼叫到我們通用的事件，然后我們功能中對應需要回應這些事件的邏輯都會被執行，

那么要實作這樣的通用邏輯，我們就需要 4 個通用的函式：

start()
move()
end()
cancel()

這 4 個函式的引數就是一個點的 point 物件，然后我們就可以在這 4 個函式里面寫它的主體邏輯，那么接下來我們就需要去改造我們的滑鼠和觸屏的監聽事件，讓它們對應的事件觸發的地方呼叫我們對應的這 4 個函式，

mousedown 和 touchstart 就會呼叫 start 函式
mousemove 和 touchmove 就會呼叫 move 函式
mouseup 和 touchend 就會呼叫 end 函式
最后 touchcancel 就會呼叫 cancel 函式

最后我們在每一個函式中列印出 point 中的 X 和 Y 坐標，

let element = document.documentElement;

element.addEventListener('mousedown', event => {
  start(event);

  let mousemove = event => {
    move(event);
  };

  let mouseup = event => {
    end(event);
    element.removeEventListener('mousemove', mousemove);
    element.removeEventListener('mouseup', mouseup);
  };

  element.addEventListener('mousemove', mousemove);
  element.addEventListener('mouseup', mouseup);
});

element.addEventListener('touchstart', event => {
  for (let touch of event.changedTouches) {
    start(touch);
  }
});

element.addEventListener('touchmove', event => {
  for (let touch of event.changedTouches) {
    move(touch);
  }
});

element.addEventListener('touchend', event => {
  for (let touch of event.changedTouches) {
    end(touch);
  }
});

element.addEventListener('cancel', event => {
  for (let touch of event.changedTouches) {
    cancel(touch);
  }
});

let start = point => {
  console.log('start', point.clientX, point.clientY);
};
let move = point => {
  console.log('move', point.clientX, point.clientY);
};
let end = point => {
  console.log('end', point.clientX, point.clientY);
};
let cancel = point => {
  console.log('cancel', point.clientX, point.clientY);
};

這個時候我們在瀏覽器中，可以使用網頁和移動端模式測驗一下，我們就發現現在無亂是用滑鼠拖動還是用移動端的拖動都會列印出當前坐標，

這個就是一個統一的抽象了，這樣我們寫代碼的時候就不用針對具體的滑鼠還是 touch 事件去做處理了，我們只需要抽象的去針對每一個點的 start、move、end、cancel 等 4種事件型別去寫邏輯就可以了，

下一期我們開始來一起實作手勢的邏輯哦，記得持續關注三哥哦～

我是來自《技術銀河》的三鉆，一位正在重塑知識的技術人，下期再見，

?? 三哥推薦

開源專案推薦

Hexo Theme Aurora

在最近的版本 1.4.x 中添加了一位可愛的機器人 Dia

Dia 可以很智能的與你的讀者做很多的互動，讓你的讀者不會在你的博客中迷路，更讓你的讀者在閱讀你的文章的時候增加更多的陪伴和樂趣哦！～

想知道這個 Dia 機器人能做什么，可以去我的博客首頁和它玩玩看哦！

最近博主在全面投入開發一個可以 “邁向未來的” Hexo 主題，以極光為主題的博客主題，

如果你是一個開發者，做一個個人博客也是你簡歷上的一個亮光點，而如果你有一個超級炫酷的博客，那就更加是亮上加亮了，簡直就閃閃發光，

如果喜歡這個主題，可以在 Github 上給我點個 🌟 讓彼此都發光吧～

主題 Github 地址：https://github.com/auroral-ui/hexo-theme-aurora
主題使用檔案：https://aurora.tridiamond.tech/zh/

VSCode Aurora Future

對，博主還做了一個 Aurora 的 VSCode 主題，用了Hexo Theme Aurora 相對應的顏色色系，這個主題的重點特性的就只用了 3 個顏色，減少在寫代碼的時候被多色多彩的顏色所轉移了你的注意力，讓你更集中在寫代碼之中，

喜歡的大家可以支持一下哦！ 直接在 VSCode 的插件搜索中輸入 “Aurora Future” 即可找到這個主題哦！～

主題 Github 地址：https://github.com/auroral-ui/aurora-future-vscode-theme
主題插件地址：https://marketplace.visualstudio.com/items?itemName=auroral-ui.aurora-future

Firefox Aurora Future

我不知道大家，但是最近我在用火狐瀏覽器來做開發了，個人覺得火狐還真的是不錯的，推薦大家嘗試一下，

當然我這里想給大家介紹的是我在火狐也做了一個 Aurora 主題，對的！用的是同一套的顏色體系，喜歡的小伙伴可以試一下哦！

主題地址：https://addons.mozilla.org/en-US/firefox/addon/aurora-future/

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/280716.html

標籤：其他

上一篇：歸類總結金三銀四前端面試題，8個方面讓你在金九銀十識訓滿滿

下一篇：前端（百度，阿里，騰訊）面試題收藏！269頁前端大廠面試題寶典分享！

用 JavaScript 實作手勢庫之第一篇 — 前端組件化