Hammer.js——移动设备触摸手势

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/cddcj/article/details/52576465



简介

Hammer.js是一个轻量级的JavaScript库(仅有2kb),能让你的网站轻松实现触控事件。它依赖于jQuery,用来控制触摸设备上的多点触控特性。并支持以下特性:

  • Tap
  • Double Tap
  • Hold
  • Drag
  • Transform

兼容性

Hammer.js已经在IOS5系统的iPad1,IOS5系统的iPhone,Android 2.3.3的三星Galaxy S以及Goolge Chrome 17测试可用。在桌面浏览器上鼠标能够模拟单个手指的触控事件。在Android 2与3 默认的浏览器以及FireFox 10不支持多点触控事件,所以在Android,FireFox 1.1(Nokia N900)上没有transform。Windows Phone 7.5不支持触摸事件,mouse event支持也很糟糕。


使用方法

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>
复制代码

它会默认为这个对象添加一系列识别器,包括 tap<点>, doubletap<双点击>, press<按住>, 水平方位的pan<平移> 和 swipe<快速滑动>, 以及多触点的 pinch<捏放> 和 rotate<旋转>识别器。不过呢,其中的 pinch 和 rotate 默认是不可用的,因为它们可能会导致元素被卡住,如果你想启用它们,可以加上这两句:

hammertime.get('pinch').set({ enable: true });
hammertime.get('rotate').set({ enable: true });

若要允许识别器识别垂直方位或全部方位的 pan 和 swipe,可以这么写:

hammertime.get('pan').set({ direction: Hammer.DIRECTION_ALL });
hammertime.get('swipe').set({ direction: Hammer.DIRECTION_VERTICAL });

另建议加上如下meta标签,防止doubletap 或 pinch 缩放了viewport:

<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">


更多控制

你可以为你的实例设置属于你自己的识别器,虽然要多写一点代码,但能让你控制更多能被识别的手势:

复制代码
var mc = new Hammer.Manager(myElement, myOptions);

mc.add( new Hammer.Pan({ direction: Hammer.DIRECTION_ALL, threshold: 0 }) );
mc.add( new Hammer.Tap({ event: 'quadrupletap', taps: 4 }) );

mc.on("pan", handlePan);
mc.on("quadrupletap", handleTaps);
复制代码

上述的代码创建了一个实例(mc),它包含了一个 pan 和一个 quadrupletap 手势,识别器实例会在它们被添加(add)之后就不断地执行,且(一个识别器实例)只能识别一个(手势)。




官网:http://hammerjs.github.io/

GitHubhttps://github.com/hammerjs/hammer.js/tree/master/

更多参数请见http://www.cnblogs.com/vajoy/p/4011723.html


展开阅读全文

没有更多推荐了,返回首页