hammer.js初探

     hammer.js官方文檔

hammerjs是什麼

　　hammerjs是一個短小精悍的庫，他可讓咱們輕鬆的實現移動端上的手勢。 

　　hammerjs的兩大優點以下：

1. 爲移動端網頁添加相關手勢。
2. 去除移動端上的點擊事件的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

　　hammer-time.js

　　

 

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.";
  });

　　完整的代碼以下所示：

  View Code

　　這樣，當咱們使用這些事件時就會觸發相應的函數了。 這裏有幾點須要注意：

1.  hammer.js依賴於一個dom元素，並須要建立他的實例。
2.  這裏咱們直接使用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