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

  });

　　完整的代码如下所示：

<!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>

　　这样，当我们使用这些事件时就会触发相应的函数了。 这里有几点需要注意：

  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

认识hammer.js的更多相关文章

  1. H5案例分享：JS手势框架 —— Hammer.js

    JS手势框架 -- Hammer.js 一.hammer.js简介 hammerJS是一个开源的,轻量级的触屏设备javascript手势库,它可以在不需要依赖其他东西的情况下识别触摸,鼠标事件.允许 ...

  2. Hammer.js手势库 安卓4.0.4上的问题

    Hammer.JS - v1.0.7dev - 2014-02-18 1.Hammer.JS 在安卓4.0.4 , 4.1上 touchmove事件丢失 https://code.google.com ...

  3. Hammer.js分析（四）——recognizer.js

    不同识别器会使用不同逻辑,根据从相关Input类获取到的事件对象和事件,实现自定义的触屏事件,例如tap.pinch等. 一.继承关系 Recognizer与前面的Input一样,也相当于是个抽象类. ...

  4. Hammer.js分析（三）——input.js

    input.js是所有input文件夹中类的父类,浏览器事件绑定.初始化特定的input类.各种参数计算函数. Input父类和其子类就是在做绑定事件,各种参数计算.整合.设置等返回自定义事件对象,交 ...

  5. Hammer.js分析（二）——manager.js

    “Manager”是所有识别器实例的容器,它为你设置的元素安装了交互事件监听器,并设置了触摸事件特性. manager.js中的代码会涉及到input.js和recoginzer.js中的内容,这里会 ...

  6. Hammer.js分析（一）——基础结构

    从github上面将源码下载下来,会发现有个src文件夹.当前版本是2.0.6. 总的结构如下: 一.常量 这里将常量全部列在一起是可以在对比源码的时候,更方便的查看相应内容. var VENDOR_ ...

  7. hammer用法 jquery.hammer.js

    jquery.hammer.js使用时要先引入hammer.min.js 下面代码是滑动效果:   $("#nav").hammer().bind('swiperight', fu ...

  8. hammer.js的六大事件

    1.Pan事件:在指定的dom区域内,一个手指放下并移动事件,即触屏中的拖动事件.这个事件在触屏开发中比较常用: Panstart 拖动开始 Panmove 拖动过程 Panend 拖动结束 Panc ...

  9. 利用轮播原理结合hammer.js实现简洁的滑屏功能

    最近有个任务,做一个非常小的h5的应用,只有2屏,需要做横向的全屏滑动切换和一些简单的动画效果,之前做这种东西用的是fullpage.js和jquery,性能不是很好,于是就想自己动手弄一个简单的东西 ...

  10. Hammer.js

    一.前言 移动端框架当前还处在初级阶段,但相对于移动端的应用来说已经有很长时间了.虽然暂时还没有PC端开发的需求量大,但移动端的Web必然是一种趋势,在接触移动端脚本的过程中,最开始想到的是juqer ...

随机推荐

  1. 编程当道，学点Python技术好傍身

    为了填满AI时代的人才缺口,编程语言教育都从娃娃抓起了!如果你还不懂Python是什么将来怎么给孩子辅导作业呢? Python新手入门教程 近期,浙江省信息技术课程改革方案出台,Python言语现已断 ...

  2. http之响应报文response

    一般情况下,服务器接收并处理客户端发过来的请求后会返回一个HTTP的响应消息. HTTP响应也由四个部分组成,分别是:状态行.消息报头.空行和响应正文. http响应消息格式.jpg 例子 HTTP/ ...

  3. 892. Surface Area of 3D Shapes

    问题 NxN个格子中,用1x1x1的立方体堆叠,grid[i][j]表示坐标格上堆叠的立方体个数,求这个3D多边形的表面积. Input: [[1,2],[3,4]] Output: 34 思路 只要 ...

  4. 20155201 2016-2017-2《Java程序设计》课程总结

    20155201 2016-2017-2<Java程序设计>课程总结 目录 一.每周作业链接汇总 二.实验报告链接汇总 三.代码托管链接 四.课堂项目实践 五.课程收获与不足 六.问卷调查 ...

  5. 2017-2018-1 JaWorld 第八周作业

    2017-2018-1 JaWorld 第八周作业 团队分工 成员 分工 陈是奇 统计成员工具选择 马平川 类图 王译潇 编码规范 李昱兴 用例图 林臻 状态图 张师瑜 推进工作进展.写博客 UML ...

  6. POJ 2699 The Maximum Number of Strong Kings （最大流+枚举）

    http://poj.org/problem?id=2699 题意: 一场联赛可以表示成一个完全图,点表示参赛选手,任意两点u, v之间有且仅有一条有向边(u, v)或( v, u),表示u打败v或v ...

  7. ${user.home} is not working in jenkins windows system

    default setting create m2 in C:\Windows\system32\config\systemprofile change it to <localReposito ...

  8. 理解flex布局

    我们传统的布局方式是基于在盒子模型下的,依赖于display属性的,position属性的或者是float属性的,但是在传统的布局上面并不好布局; 比如我们想让某个元素垂直居中的话,我们常见的会让其元 ...

  9. spark 累加历史 + 统计全部 + 行转列

    spark 累加历史主要用到了窗口函数,而进行全部统计,则需要用到rollup函数 1  应用场景: 1.我们需要统计用户的总使用时长(累加历史) 2.前台展现页面需要对多个维度进行查询,如:产品.地 ...

  10. hdu4289最小割

    最近博客断更了一段时间啊,快期末了,先把这个专题搞完再说 最小割=最大流 拆点方法很重要,刚开始我拆点不对就wa了,然后改进后tle,应该是数组开小了,一改果然是 #include<map> ...