Hammer.js 應用

下載位置:

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

Last updated