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