天天看點

支援移動端和PC端的輕量級輪播圖插件&&hammer.js教程下載下傳:http://download.csdn.net/detail/cometwo/9407912

支援移動端和PC端的輕量級輪播圖插件&&hammer.js教程下載下傳:http://download.csdn.net/detail/cometwo/9407912
支援移動端和PC端的輕量級輪播圖插件&&hammer.js教程下載下傳:http://download.csdn.net/detail/cometwo/9407912

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事件進行處理。

經驗分享:寫到這個事件的時候有人必然要問了,在觸屏中我們使用Click事件不也可以嗎?這個Tap事件與Click事件有什麼差別呢?部落客也曾經有過這樣的疑惑,起初在觸屏上處理點選的時候也一直用的click事件,并且沒也有出現任何問題,直到有一天為一個公司做了微信版本的“連連看”小遊戲,連連看的業務簡單來說就是螢幕上有很多圖檔,當點選兩個相同圖案的圖檔時可以在中間産生連接配接線,并且産生爆破效果後消失。這個遊戲剛開始做的時候是在ff浏覽器上做的測試,滑鼠點選後效果非常流暢,但當遊戲部署到伺服器上并用手機端操作時,iphone和wp都非常流暢,安卓下不管怎麼調都是有卡頓。起初以為是手機性能的問題,但換了高配手機後仍然會有卡頓,遊戲也不是不能玩,就是反應慢。經過多次的測試後排除了手機配置的硬體原因,開始懷疑click事件。經過網上查閱後才得知,在安卓觸屏上,Tap事件和click事件可以同時觸發,但click事件會有幾百毫秒的延遲,即先觸發Tap事件,過一段時間再觸發click事件。後來把遊戲的所有click事件修改成Tap事件問題就自然解決了。

繼續閱讀