Hammer.js移動端觸屏框架的使用

hammer.js是一個多點觸摸手勢庫，能夠為網頁加入Tap、Double Tap、Swipe、Hold、Pinch、Drag等多點觸摸事件，免去自己監聽底層touchstart、touchmove、touchend事件並且寫一大堆判斷邏輯的痛苦。hammer.js不但支持觸摸屏設備的瀏覽器，在桌面瀏覽器上，也能將鼠標的點擊當做觸摸，方便開發人員在桌面瀏覽器上調試。這是一個專為觸摸手勢而生的js庫，對有需要的朋友非常有幫助，奉上常用的一些方法調用文檔。

使用方法：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

<script src= "http://eightmedia.github.com/hammer.js/hammer.js" ></script>   // 先要對監聽的DOM進行一些初始化 var  hammer = new  Hammer(document.getElementById( "container" ));   // 然后加入相應的回調函數即可 hammer.ondragstart = function (ev) { };  // 開始拖動 hammer.ondrag = function (ev) { }; // 拖動中 hammer.ondragend = function (ev) { }; // 拖動結束 hammer.onswipe = function (ev) { }; // 滑動   hammer.ontap = function (ev) { }; // 單擊 hammer.ondoubletap = function (ev) { }; //雙擊 hammer.onhold = function (ev) { }; // 長按   hammer.ontransformstart = function (ev) { }; // 雙指收張開始 hammer.ontransform = function (ev) { }; // 雙指收張中 hammer.ontransformend = function (ev) { }; // 雙指收張結束   hammer.onrelease = function (ev) { }; // 手指離開屏幕

還支持jQuery插件的形式調用

1 2 3 4 5 6 7 8 9

<script src= "http://eightmedia.github.com/hammer.js/jquery.hammer.js" ></script>   $( "#element" )     .hammer({          // 對DOM進行一些初始化，這里可以加入一些參數。不是必須的     })     .bind( "tap" , function (ev) {          console.log(ev);     });

官網地址：http://eightmedia.github.com/hammer.js/  （帶演示）
源碼地址：https://github.com/EightMedia/hammer.js

一、前言

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

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

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

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

二、hammer.js是什么

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

 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>