> For the complete documentation index, see [llms.txt](https://learnprogramming.gitbook.io/programlearned/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://learnprogramming.gitbook.io/programlearned/javascript/hammer.md).

# Hammer.js 應用

## 下載位置:

[Hammer.js](https://github.com/partyyaya/programlearned/blob/master/programLearned/javascript/hammer.js)

## 分類用法:

* 1、 Pan事件：在指定的dom區域內，一個手指放下並移動事件，即觸屏中的拖動事件。這個事件在屏觸開發中比較常用，如：左拖動、右拖動等，如手要上使用QQ時向右滑動出現功能菜單的效果。該事件還可以分別對以下事件進行監聽並處理：
  * Panstart：拖動開始
  * Panmove：拖動過程
  * Panend：拖動結束
  * Pancancel：拖動取消
  * Panleft：向左拖動
  * Panright：向右拖動
  * Panup：向上拖動
  * Pandown：向下拖動
* 2、 Pinch事件：在指定的dom區域內，兩個手指（默認為兩個手指，多指觸控需要單獨設置）或多個手指相對（越來越近）移動或相向（越來越遠）移動時事件。該事件事以分別對以下事件進行監聽並處理：
  * Pinchstart：多點觸控開始
  * Pinchmove：多點觸控過程
  * Pinchend：多點觸控結束
  * Pinchcancel：多點觸控取消
  * Pinchin：多點觸控時兩手指距離越來越近
  * Pinchout：多點觸控時兩手指距離越來越遠
* 3、 Press事件：在指定的dom區域內觸屏版本的點擊事件，這個事件相當於PC端的Click事件，該不能包含任何的移動，最小按壓時間為500毫秒，常用於我們在手機上用的“複製、粘貼”等功能。該事件分別對以下事件進行監聽並處理：
  * Pressup：點擊事件離開時觸發
* 4、 Rotate事件：在指定的dom區域內，當兩個手指或更多手指成圓型旋轉時觸發（就像兩個手指擰螺絲一樣）。該事件分別對以下事件進行監聽並處理：
  * Rotatestart：旋轉開始
  * Rotatemove：旋轉過程
  * Rotateend：旋轉結束
  * Rotatecancel：旋轉取消
* 5、 Swipe事件：在指定的dom區域內，一個手指快速的在觸屏上滑動。即我們平時用到最多的滑動事件。
  * Swipeleft：向左滑動
  * Swiperight：向右滑動
  * Swipeup：向上滑動
  * Swipedown：向下滑動
* 6、Tap事件：在指定的dom區域內，一個手指輕拍或點擊時觸發該事件(類似PC端的click)。該事件最大點擊時間為250毫秒，如果超過250毫秒則按Press事件進行處理。

實現: <https://codepen.io/partyyaya/pen/KLoWJJ>