Hammer.js

時間  2019-11-06
標籤 hammer.js hammer 欄目 JavaScript 简体版
原文   原文鏈接

1、前言

移動端框架當前還處在初級階段，但相對於移動端的應用來講已經有很長時間了。雖然暫時尚未PC端開發的需求量大，但移動端的Web必然是一種趨勢，在接觸移動端腳本的過程當中，最開始想到的是juqery。Jquery2.0版本及以上已經開始偏向移動端，如對h5的支持，但支持仍是不夠完善，但願jq在後面的版本可以逐漸支持起來。javascript

最初在開發移動端Web的時候使用w3c標準的語法結構和原生的js開發，但相對來講開發量比較大，並且每一步都要考慮各移動端瀏覽器的兼容，像比較讓程序員頭痛的大wp手機，不少事件都向w3c申請單獨的標準。所以一個好的兼容性架構對於開發者來講能夠節省很大一部分工做量。css

剛開始接觸移動端框架之初也問了一些一直搞前端的朋友，大部份都在百度阿里等工做。參考你們的建議後咱們作項目使用了zepto.js（不少搞前端的朋友應該並不陌生）。這個框架有個很大的問題就是不兼容wp手機，使用zepto.js開發完項目後，再針對wp手機兼容作調整總感受有些「得不償失」，後來諮詢了些朋友，他們所在的公司在開發的時候基本都放棄wp的兼容（我只能對wp說「呵呵」了）。後面就諮詢到有用hammer.js進行開發的。咱們研究了下，hammer.js輕量級，封裝的也比較好。用起來也很方便。兼容性也不錯。但網上中文資料比較少，園子寫hammer的就更少了。所以有了這篇文章。html

此文章基於hammer.js 官網：http://hammerjs.github.io/ ，版本基於v2.0.4。若是該文章的api已過時，請自行到官網查詢最新api。此文章只作入門使用。前端

2、hammer.js是什麼

hammer.js是一款開源的移動端腳本框架，他能夠完美的實如今移端開發的大多數事件，如：點擊、滑動、拖動、多點觸控等事件。不須要依賴任何其餘的框架，而且整個框架很是小，\在使用時很是簡單，代碼示例以下：java

 1  <div id="test" class="test"></div>
 2     <script type="text/javascript">
 3         //建立一個新的hammer對象而且在初始化時指定要處理的dom元素
 4         var hammertime = new Hammer(document.getElementById("test"));
 5         //爲該dom元素指定觸屏移動事件
 6         hammertime.on("pan", function (ev) {
 7             //控制檯輸出
 8             console.log(ev);
 9         });
10 </script>

三事件架構

hammer.js主要針對觸屏的6大事件進行監聽。以下圖所示：git

一、  Pan事件：在指定的dom區域內，一個手指放下並移動事件，即觸屏中的拖動事件。這個事件在屏觸開發中比較經常使用，如：左拖動、右拖動等，如手要上使用QQ時向右滑動出現功能菜單的效果。該事件還能夠分別對如下事件進行監聽並處理：程序員

Panstart：拖動開始、Panmove：拖動過程、Panend：拖動結束、Pancancel：拖動取消、Panleft：向左拖動、Panright：向右拖動、Panup：向上拖動、Pandown：向下拖動github

二、  Pinch事件：在指定的dom區域內，兩個手指（默認爲兩個手指，多指觸控須要單獨設置）或多個手指相對（愈來愈近）移動或相向（愈來愈遠）移動時事件。該事件事以分別對如下事件進行監聽並處理：api

Pinchstart：多點觸控開始、Pinchmove：多點觸控過程、Pinchend：多點觸控結束、Pinchcancel：多點觸控取消、Pinchin：多點觸控時兩手指距離愈來愈近、Pinchout：多點觸控時兩手指距離愈來愈遠瀏覽器

三、  Press事件：在指定的dom區域內觸屏版本的點擊事件，這個事件至關於PC端的Click事件，該不能包含任何的移動，最小按壓時間爲500毫秒，經常使用於咱們在手機上用的「複製、粘貼」等功能。該事件分別對如下事件進行監聽並處理：

Pressup：點擊事件離開時觸發

四、  Rotate事件：在指定的dom區域內，當兩個手指或更多手指成圓型旋轉時觸發（就像兩個手指擰螺絲同樣）。該事件分別對如下事件進行監聽並處理：

Rotatestart：旋轉開始、Rotatemove：旋轉過程、Rotateend：旋轉結束、Rotatecancel：旋轉取消

五、  Swipe事件：在指定的dom區域內，一個手指快速的在觸屏上滑動。即咱們平時用到最多的滑動事件。

Swipeleft：向左滑動、Swiperight：向右滑動、Swipeup：向上滑動、Swipedown：向下滑動

六、Tap事件：在指定的dom區域內，一個手指輕拍或點擊時觸發該事件(相似PC端的click)。該事件最大點擊時間爲250毫秒，若是超過250毫秒則按Press事件進行處理。

經驗分享：寫到這個事件的時候有人必然要問了，在觸屏中咱們使用Click事件不也能夠嗎？這個Tap事件與Click事件有什麼區別呢？博主也曾經有過這樣的疑惑，起初在觸屏上處理點擊的時候也一直用的click事件，而且沒也有出現任何問題，直到有一天爲一個公司作了微信版本的「連連看」小遊戲，連連看的業務簡單來講就是屏幕上有不少圖片，當點擊兩個相同圖案的圖片時能夠在中間產生鏈接線，而且產生爆破效果後消失。這個遊戲剛開始作的時候是在ff瀏覽器上作的測試，鼠標點擊後效果很是流暢，但當遊戲部署到服務器上並用手機端操做時，iphone和wp都很是流暢，安卓下無論怎麼調都是有卡頓。起初覺得是手機性能的問題，但換了高配手機後仍然會有卡頓，遊戲也不是不能玩，就是反應慢。通過屢次的測試後排除了手機配置的硬件緣由，開始懷疑click事件。通過網上查閱後才得知，在安卓觸屏上，Tap事件和click事件能夠同時觸發，但click事件會有幾百毫秒的延遲，即先觸發Tap事件，過一段時間再觸發click事件。後來把遊戲的全部click事件修改爲Tap事件問題就天然解決了。

4、 使用實例

一、 Pan

代碼以下：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta name="viewport" content="width=device-width" />
 5     <title>Pan</title>
 6     <script src="/Script/hammer.js"></script>
 7     <style type="text/css">
 8         html, body {
 9             width: 100%;
10             height: 100%;
11             margin: 0px;
12             padding: 0px;
13         }
14 
15         .test {
16             width: 100%;
17             height: 50%;
18             background: #ffd800;
19             text-align: left;
20         }
21 
22         .result {
23             width: 100%;
24             height: 50%;
25             background: #b6ff00;
26             text-align: left;
27         }
28     </style>
29 </head>
30 <body>
31     <div id="test" class="test">事件區域</div>
32     <div id="result" class="result">事件結果<br /></div>
33     <script type="text/javascript">
34         //建立一個新的hammer對象而且在初始化時指定要處理的dom元素
35         var hammertime = new Hammer(document.getElementById("test"));
36         //添加事件
37         hammertime.on("pan", function (e) {
38             document.getElementById("result").innerHTML += "X偏移量：【" + e.deltaX + "】，Y偏移量：【" + e.deltaY + "】<br />";
39             //控制檯輸出
40             console.log(e);
41         });
42     </script>
43 </body>
44 </html>

效果以下：

二、Pinch

代碼以下：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta name="viewport" content="width=device-width" />
 5     <title>Pinch</title>
 6     <script src="/Script/hammer.js"></script>
 7     <style type="text/css">
 8         html, body {
 9             width: 100%;
10             height: 100%;
11             margin: 0px;
12             padding: 0px;
13         }
14 
15         .test {
16             width: 100%;
17             height: 50%;
18             background: #ffd800;
19             text-align: left;
20         }
21 
22         .result {
23             width: 100%;
24             height: 50%;
25             background: #b6ff00;
26             text-align: left;
27         }
28     </style>
29 </head>
30 <body>
31     <div id="test" class="test">事件區域</div>
32     <div id="result" class="result">事件結果：捏合觸發<br /></div>
33     <script type="text/javascript">
34         //建立一個新的hammer對象而且在初始化時指定要處理的dom元素
35         var hammertime = new Hammer(document.getElementById("test"));
36         //爲該dom元素指定觸屏移動事件
37         hammertime.add(new Hammer.Pinch());
38         //添加事件
39         hammertime.on("pinchin", function (e) {
40             document.getElementById("result").innerHTML += "捏合初觸發<br />";
41             //控制檯輸出
42             console.log(e);
43         });
44     </script>
45 </body>
46 </html>

效果以下：

三、Press

代碼以下：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta name="viewport" content="width=device-width" />
 5     <title>Press</title>
 6     <script src="/Script/hammer.js"></script>
 7     <style type="text/css">
 8         html, body {
 9             width: 100%;
10             height: 100%;
11             margin: 0px;
12             padding: 0px;
13         }
14 
15         .test {
16             width: 100%;
17             height: 50%;
18             background: #ffd800;
19             text-align: left;
20         }
21 
22         .result {
23             width: 100%;
24             height: 50%;
25             background: #b6ff00;
26             text-align: left;
27         }
28     </style>
29 </head>
30 <body>
31     <div id="test" class="test">事件區域</div>
32     <div id="result" class="result">事件結果：按壓超過500ms觸發<br /></div>
33     <script type="text/javascript">
34         //建立一個新的hammer對象而且在初始化時指定要處理的dom元素
35         var hammertime = new Hammer(document.getElementById("test"));
36         //添加事件
37         hammertime.on("press", function (e) {
38             document.getElementById("result").innerHTML += "超過500ms了<br />";
39             //控制檯輸出
40             console.log(e);
41         });
42     </script>
43 </body>
44 </html>

效果以下： 

四、Rotate

代碼以下：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta name="viewport" content="width=device-width" />
 5     <title>Rotate</title>
 6     <script src="/Script/hammer.js"></script>
 7     <style type="text/css">
 8         html, body {
 9             width: 100%;
10             height: 100%;
11             margin: 0px;
12             padding: 0px;
13         }
14 
15         .test {
16             width: 100%;
17             height: 50%;
18             background: #ffd800;
19             text-align: left;
20         }
21 
22         .result {
23             width: 100%;
24             height: 50%;
25             background: #b6ff00;
26             text-align: left;
27         }
28     </style>
29 </head>
30 <body>
31     <div id="test" class="test">事件區域</div>
32     <div id="result" class="result">事件結果：旋轉觸發<br /></div>
33     <script type="text/javascript">
34         //建立一個新的hammer對象而且在初始化時指定要處理的dom元素
35         var hammertime = new Hammer(document.getElementById("test"));
36         //爲該dom元素指定觸屏移動事件
37         hammertime.add(new Hammer.Rotate());
38         //添加事件
39         hammertime.on("rotate", function (e) {
40             document.getElementById("result").innerHTML += "X偏移量：【" + e.deltaX + "】，Y偏移量：【" + e.deltaY + "】<br />";
41             //控制檯輸出
42             console.log(e);
43         });
44     </script>
45 </body>
46 </html>

效果以下：

五、Swipe

代碼以下：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta name="viewport" content="width=device-width" />
 5     <title>Swipe</title>
 6     <script src="/Script/hammer.js"></script>
 7     <style type="text/css">
 8         html, body {
 9             width: 100%;
10             height: 100%;
11             margin: 0px;
12             padding: 0px;
13         }
14 
15         .test {
16             width: 100%;
17             height: 50%;
18             background: #ffd800;
19             text-align: left;
20         }
21 
22         .result {
23             width: 100%;
24             height: 50%;
25             background: #b6ff00;
26             text-align: left;
27         }
28     </style>
29 </head>
30 <body>
31     <div id="test" class="test">事件區域</div>
32     <div id="result" class="result">事件結果：向左滑動觸發<br /></div>
33     <script type="text/javascript">
34         //建立一個新的hammer對象而且在初始化時指定要處理的dom元素
35         var hammertime = new Hammer(document.getElementById("test"));
36         //添加事件
37         hammertime.on("swipeleft", function (e) {
38             document.getElementById("result").innerHTML += "X偏移量：【" + e.deltaX + "】，Y偏移量：【" + e.deltaY + "】<br />";
39             //控制檯輸出
40             console.log(e);
41         });
42     </script>
43 </body>
44 </html>

效果以下：

六、Tab

代碼以下：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta name="viewport" content="width=device-width" />
 5     <title>Tap</title>
 6     <script src="/Script/hammer.js"></script>
 7     <style type="text/css">
 8         html, body {
 9             width: 100%;
10             height: 100%;
11             margin: 0px;
12             padding: 0px;
13         }
14 
15         .test {
16             width: 100%;
17             height: 50%;
18             background: #ffd800;
19             text-align: left;
20         }
21 
22         .result {
23             width: 100%;
24             height: 50%;
25             background: #b6ff00;
26             text-align: left;
27         }
28     </style>
29 </head>
30 <body>
31     <div id="test" class="test">事件區域</div>
32     <div id="result" class="result">事件結果：點擊觸發<br /></div>
33     <script type="text/javascript">
34         //建立一個新的hammer對象而且在初始化時指定要處理的dom元素
35         var hammertime = new Hammer(document.getElementById("test"));
36         //添加事件
37         hammertime.on("tap", function (e) {
38             document.getElementById("result").innerHTML += "點擊觸發了，長按無效<br />";
39             //控制檯輸出
40             console.log(e);
41         });
42     </script>
43 </body>
44 </html>

效果以下：

上述的實例仍是有所區別的。在Pinch事件和Rotate事件中，咱們用了hammertime.add(new Hammer.Pinch());和hammertime.add(new Hammer.Rotate ());而其餘四個事件沒有用，而是直接添加了事件的監聽程序。緣由在於，咱們在new Hammer(htmlElement)的時候，Hammer.js默認對Pan、Press、Swipe和Tab事件進行了監聽。但沒有對Pinch和Rotate事件進行監聽。

5、源碼下載

點我下載源碼

6、後紀（請看18樓-25樓的回覆）

關於hammer.js的swipeup事件不觸發，緣由是hammer.js在建立一個新對象時默認會添加些經常使用事件(詳細見：http://hammerjs.github.io/getting-started/)。注意，是經常使用事件，而不是所有事件。swipe事件官方說是在經常使用事件內，但實際不在經常使用事件內。所以，要對這些很是用事件單獨作監聽，僞代碼以下所示：

1 var hammertime = new Hammer(document.getElementById("test"));
2 hammertime.add(new Hammer.Swipe());
3 hammertime.on("swipeup",function(){.......})

當一個對象須要多個事件時，經官方api和測試結果，須要對一個事件添加多個監聽，僞代碼以下所示：

1 var hammertime = new Hammer(document.getElementById("test"));
2 hammertime.add(new Hammer.Swipe());
3 hammertime.on("swipeup",function(){.......})
4 var hammertime1 = new Hammer(document.getElementById("test"));
5 hammertime.on("swipeleft",function(){.......})

關於多事件綁定hammer.js官網當前版本並未給出好的寫法，但願之後的版本能出現吧。

版權：http://www.cnblogs.com/iamlilinfeng

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程