hammer.js初探

時間 2019-12-01

標籤 hammer.js hammer 初探欄目 JavaScript 简体版

原文原文鏈接

　　最近以爲本身的進步比較慢了，頗有多是由於中文區的學習和百度的使用極大的限制了本身的視野，因此，之後不管是新技術的學習，仍是問題的解決，作到如下幾點:html

新技術的學習必須經過英文文檔，而不是翻譯過來的蹩腳的中文文檔。
問題的搜尋經過google、經過stackoverflow，若是在知道其侷限性的狀況下再去百度或者其餘方法。
遇到有問題的詞彙就經過Google翻譯搜尋，但實際上這時候經過百度也是能夠的，由於百度知道的存在也是有用的。

　　嗯，第一個完整的英文文檔就從hammer.js開始吧！加油。git

hammer.js官方文檔

hammerjs是什麼

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

　　hammerjs的兩大優點以下：web

爲移動端網頁添加相關手勢。
去除移動端上的點擊事件的300ms延遲。

爲何使用hammerjs

　　誠然，咱們能夠經過touch的四個事件等來完成相同的功能，可是不可避免的會比較麻煩，因此既然前人已經造了這個好輪子，爲何不去使用呢？另外，300ms的延遲有時是咱們不須要的，好比，咱們在作webapp時，不須要頁面的縮放，而300ms的延遲就是爲了webapp的縮放而規定的，所以作webapp時咱們就可使用hammer-time.js來移除300ms的點擊延遲。app

　　另外，hammer.js通過壓縮只有7kb，而hammer-time.js通過壓縮只有1kb，因此徹底不用考慮引入他們以後的性能問題，這簡直太棒了！dom

安裝

　　咱們能夠直接將hammer.js和hammer-time.js下載下來，而後引入script標籤便可。 webapp

　　hammer.jside

　　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元素。

　　第三步：建立一個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>

View Code

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

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

recognizeWith 和 requireFailure

1. hammer.js初探
2. Hammer.js
3. hammer.js
4. hammer.js學習
5. Hammer.js源碼簡析
6. Hammer.js 手勢事件
7. hammer.js中文文檔
8. hammer.js手勢處理文檔
9. IP、UDP初探
10. GPUImage 初探
更多相關文章...
• 探索Redis事務回滾 - Redis教程
• 使用TCP協議檢測防火牆 - TCP/IP教程
• 適用於PHP初學者的學習線路和建議
• Java Agent入門實戰（一）-Instrumentation介紹與使用

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。