最近覺得自己的進步比較慢了，很有可能是因為中文區的學習和百度的使用極大的限制了自己的視野，所以，以后無論是新技術的學習，還是問題的解決，做到以下幾點:
- 新技術的學習必須通過英文文檔，而不是翻譯過來的蹩腳的中文文檔。
- 問題的搜尋通過google、通過stackoverflow，如果在知道其局限性的情況下再去百度或者其他方法。
- 遇到有問題的詞匯就通過Google翻譯搜尋，但實際上這時候通過百度也是可以的，因為百度知道的存在也是有用的。
嗯，第一個完整的英文文檔就從hammer.js開始吧！ 加油。
hammer.js官方文檔
hammerjs是什么
hammerjs是一個短小精悍的庫，他可以讓我們輕松的實現移動端上的手勢。
hammerjs的兩大優勢如下：
- 為移動端網頁添加相關手勢。
- 去除移動端上的點擊事件的300ms延遲。
為什么使用hammerjs
誠然，我們可以通過touch的四個事件等來完成相同的功能，但是不可避免的會比較麻煩，所以既然前人已經造了這個好輪子，為什么不去使用呢？ 另外，300ms的延遲有時是我們不需要的，比如，我們在做webapp時，不需要頁面的縮放，而300ms的延遲就是為了webapp的縮放而規定的， 因此做webapp時我們就可以使用hammer-time.js來移除300ms的點擊延遲。
另外，hammer.js經過壓縮只有7kb，而hammer-time.js經過壓縮只有1kb，所以完全不用考慮引入他們之后的性能問題，這簡直太棒了！
安裝
我們可以直接將hammer.js和hammer-time.js下載下來，然后引入script標簽即可。
hammer.js支持的手勢
hammerjs支持下面6種常規的手勢，除此之外，我們還可以自定義手勢。
- rotate 實現旋轉效果，如旋轉圖片
- pinch/zoom 放大、縮小
- press 長時間按壓觸發效果
- pan 左右滑動
- tap 點擊
- swipe 滑動
簡單的例子
使用hammerjs也是非常簡單的。
第一步： 引入hammer.js庫。
<script src="https://hammerjs.github.io/dist/hammer.js"></script>
第二步： 創建一個用於使用手勢的dom元素。
<div id="myElement">good</div>
第三步： 創建一個hammer實例。
var myElement = document.getElementById('myElement');
var mc = new Hammer(myElement);
第四步： 添加一個事件，這樣我們就可以知道該事件是否被觸發了。
mc.on("panleft panright tap press", function(ev) { myElement.textContent = ev.type +" gesture detected."; });
完整的代碼如下所示：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>hammer</title> <style> #myElement { background: silver; height: 300px; text-align: center; font: 30px/300px Helvetica, Arial, sans-serif; } </style> <script src="https://hammerjs.github.io/dist/hammer.js"></script> </head> <body> <div id="myElement">good</div> <script> var myElement = document.getElementById('myElement'); var mc = new Hammer(myElement); mc.on("panleft panright tap press", function(ev) { myElement.textContent = ev.type +" gesture detected."; }); </script> </body> </html>
這樣，當我們使用這些事件時就會觸發相應的函數了。 這里有幾點需要注意：
- hammer.js依賴於一個dom元素，並需要創建他的實例。
- 這里我們直接使用new Hammer()來創建了一個實例，這個實例中就自動幫我們創建了tap、doubletap、pan、swap、press事件，所以我們可以直接通過on來監聽這些事件，但是他並沒有創建 pinch 事件和 rotate 事件，因為創建這兩個事件會將該元素修改為塊級元素，當然，我們可以通過設置還使得其支持pinch和rotate事件。如下所示：
mh.get('pinch').set({ enable: true }); mh.get('rotate').set({ enable: true });
更多控制
在上一個例子中，我們使用的時new Hammer創建的hammer實例，它會默認創建包含多種事件的實例（事件中不包括pinch和rotate，因為這會限制元素為塊級元素）。
這里我們將要介紹的時使用new Hammer.Manager() 創建實例，這樣可以自己控制事件，如下所示：
<div id="myElement">good</div> <script> var myElement = document.getElementById('myElement'); var mc = new Hammer.Manager(myElement); mc.add( new Hammer.Pan({direction: Hammer.DIRECTION_ALL, threshold: 0}) ); mc.add( new Hammer.Tap({ event: 'quadrupletap', taps: 4 }) ); mc.on("quadrupletap", function(ev) { alert("something"); });
mc.on("pan", function(ev) {
alert("another");
});
</script>
即通過Hammer.Manager()創建的hammer實例默認是沒有任何事件的，接着我們可以使用add來添加事件。 add之后就可以使用on來給該事件綁定函數了。值得注意的是，這里的兩個事件一次只能識別一個。
那么如果希望可以同時識別，那么應該怎么做呢？
recognizeWith 和 requireFailure