首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

移动端脚本框架Hammer.js

Posted in Javascript onDecember 15, 2016

一、前言

  移动端框架当前还处在初级阶段，但相对于移动端的应用来说已经有很长时间了。虽然暂时还没有PC端开发的需求量大，但移动端的Web必然是一种趋势，在接触移动端脚本的过程中，最开始想到的是juqery。Jquery2.0版本及以上已经开始偏向移动端，如对h5的支持，但支持还是不够完善，希望jq在后面的版本能够逐渐支持起来。

  最初在开发移动端Web的时候使用w3c标准的语法结构和原生的js开发，但相对来说开发量比较大，而且每一步都要考虑各移动端浏览器的兼容，像比较让程序员头痛的大wp手机，很多事件都向w3c申请单独的标准。因此一个好的兼容性架构对于开发者来说可以节省很大一部分工作量。

  刚开始接触移动端框架之初也问了一些一直搞前端的朋友，大部份都在百度阿里等工作。参考大家的建议后我们做项目使用了zepto.js（很多搞前端的朋友应该并不陌生）。这个框架有个很大的问题就是不兼容wp手机，使用zepto.js开发完项目后，再针对wp手机兼容做调整总感觉有些“得不偿失”，后来咨询了些朋友，他们所在的公司在开发的时候基本都放弃wp的兼容（我只能对wp说“呵呵”了）。后面就咨询到有用hammer.js进行开发的。我们研究了下，hammer.js轻量级，封装的也比较好。用起来也很方便。兼容性也不错。但网上中文资料比较少，园子写hammer的就更少了。因此有了这篇文章。

  此文章基于hammer.js 官网：http://hammerjs.github.io/ ，版本基于v2.0.4。如果该文章的api已过期，请自行到官网查询最新api。此文章只做入门使用。

二、hammer.js是什么

  hammer.js是一款开源的移动端脚本框架，他可以完美的实现在移端开发的大多数事件，如：点击、滑动、拖动、多点触控等事件。不需要依赖任何其他的框架，并且整个框架非常小，\在使用时非常简单，代码示例如下：

<div id="test" class="test"></div> 
  <script type="text/javascript"> 
    //创建一个新的hammer对象并且在初始化时指定要处理的dom元素 
    var hammertime = new Hammer(document.getElementById("test")); 
    //为该dom元素指定触屏移动事件 
    hammertime.on("pan", function (ev) { 
     //控制台输出 
     console.log(ev); 
    }); 
</script>

三、事件架构

 hammer.js主要针对触屏的6大事件进行监听。如下图所示：

移动端脚本框架Hammer.js

1、Pan事件：在指定的dom区域内，一个手指放下并移动事件，即触屏中的拖动事件。这个事件在屏触开发中比较常用，如：左拖动、右拖动等，如手要上使用QQ时向右滑动出现功能菜单的效果。该事件还可以分别对以下事件进行监听并处理：Panstart：拖动开始、Panmove：拖动过程、Panend：拖动结束、Pancancel：拖动取消、Panleft：向左拖动、Panright：向右拖动、Panup：向上拖动、Pandown：向下拖动。

2、Pinch事件：在指定的dom区域内，两个手指（默认为两个手指，多指触控需要单独设置）或多个手指相对（越来越近）移动或相向（越来越远）移动时事件。该事件事以分别对以下事件进行监听并处理：Pinchstart：多点触控开始、Pinchmove：多点触控过程、Pinchend：多点触控结束、Pinchcancel：多点触控取消、Pinchin：多点触控时两手指距离越来越近、Pinchout：多点触控时两手指距离越来越远。

3、Press事件：在指定的dom区域内触屏版本的点击事件，这个事件相当于PC端的Click事件，该不能包含任何的移动，最小按压时间为500毫秒，常用于我们在手机上用的“复制、粘贴”等功能。该事件分别对以下事件进行监听并处理： Pressup：点击事件离开时触发。

4、Rotate事件：在指定的dom区域内，当两个手指或更多手指成圆型旋转时触发（就像两个手指拧螺丝一样）。该事件分别对以下事件进行监听并处理：Rotatestart：旋转开始、Rotatemove：旋转过程、Rotateend：旋转结束、Rotatecancel：旋转取消。

5、Swipe事件：在指定的dom区域内，一个手指快速的在触屏上滑动。即我们平时用到最多的滑动事件。Swipeleft：向左滑动、Swiperight：向右滑动、Swipeup：向上滑动、Swipedown：向下滑动。

6、Tap事件：在指定的dom区域内，一个手指轻拍或点击时触发该事件(类似PC端的click)。该事件最大点击时间为250毫秒，如果超过250毫秒则按Press事件进行处理。

  经验分享：写到这个事件的时候有人必然要问了，在触屏中我们使用Click事件不也可以吗？这个Tap事件与Click事件有什么区别呢？博主也曾经有过这样的疑惑，起初在触屏上处理点击的时候也一直用的click事件，并且没也有出现任何问题，直到有一天为一个公司做了微信版本的“连连看”小游戏，连连看的业务简单来说就是屏幕上有很多图片，当点击两个相同图案的图片时可以在中间产生连接线，并且产生爆破效果后消失。这个游戏刚开始做的时候是在ff浏览器上做的测试，鼠标点击后效果非常流畅，但当游戏部署到服务器上并用手机端操作时，iphone和wp都非常流畅，安卓下不管怎么调都是有卡顿。起初以为是手机性能的问题，但换了高配手机后仍然会有卡顿，游戏也不是不能玩，就是反应慢。经过多次的测试后排除了手机配置的硬件原因，开始怀疑click事件。经过网上查阅后才得知，在安卓触屏上，Tap事件和click事件可以同时触发，但click事件会有几百毫秒的延迟，即先触发Tap事件，过一段时间再触发click事件。后来把游戏的所有click事件修改成Tap事件问题就自然解决了。

四、 使用实例

1、 Pan

代码如下

<!DOCTYPE html> 
 <html> 
 <head> 
   <meta name="viewport" content="width=device-width" /> 
   <title>Pan</title> 
   <script src="/Script/hammer.js"></script> 
   <style type="text/css"> 
     html, body { 
       width: 100%; 
       height: 100%; 
       margin: 0px; 
       padding: 0px; 
     } 
  
     .test { 
       width: 100%; 
      height: 50%; 
      background: #ffd800; 
       text-align: left; 
     } 
  
    .result { 
       width: 100%; 
       height: 50%; 
       background: #b6ff00; 
       text-align: left; 
     } 
   </style> 
 </head> 
 <body> 
   <div id="test" class="test">事件区域</div> 
   <div id="result" class="result">事件结果<br /></div> 
   <script type="text/javascript"> 
     //创建一个新的hammer对象并且在初始化时指定要处理的dom元素 
    var hammertime = new Hammer(document.getElementById("test")); 
     //添加事件 
    hammertime.on("pan", function (e) { 
       document.getElementById("result").innerHTML += "X偏移量：【" + e.deltaX + "】，Y偏移量：【" + e.deltaY + "】<br />"; 
       //控制台输出 
      console.log(e); 
     }); 
  </script> 
 </body> 
 </html>

效果如下：

  移动端脚本框架Hammer.js

2、Pinch

代码如下：

<!DOCTYPE html> 
<html> 
 <head> 
   <meta name="viewport" content="width=device-width" /> 
 <title>Pinch</title> 
  <script src="/Script/hammer.js"></script> 
  <style type="text/css"> 
     html, body { 
      width: 100%; 
      height: 100%; 
      margin: 0px; 
      padding: 0px; 
    } 
    .test { 
      width: 100%; 
      height: 50%; 
      background: #ffd800; 
      text-align: left; 
    } 
    .result { 
      width: 100%; 
      height: 50%; 
      background: #b6ff00; 
      text-align: left; 
    } 
  </style> 
</head> 
<body> 
  <div id="test" class="test">事件区域</div> 
  <div id="result" class="result">事件结果：捏合触发<br /></div> 
  <script type="text/javascript"> 
    //创建一个新的hammer对象并且在初始化时指定要处理的dom元素 
    var hammertime = new Hammer(document.getElementById("test")); 
    //为该dom元素指定触屏移动事件 
    hammertime.add(new Hammer.Pinch()); 
    //添加事件 
    hammertime.on("pinchin", function (e) { 
      document.getElementById("result").innerHTML += "捏合初触发<br />"; 
      //控制台输出 
      console.log(e); 
    }); 
  </script> 
</body> 
</html>

效果如下： 

 移动端脚本框架Hammer.js

3、Press

代码如下：

<!DOCTYPE html> 
 <html> 
 <head> 
  <meta name="viewport" content="width=device-width" /> 
  <title>Press</title> 
   <script src="/Script/hammer.js"></script> 
   <style type="text/css"> 
    html, body { 
      width: 100%; 
       height: 100%; 
       margin: 0px; 
       padding: 0px; 
     } 
  
     .test { 
       width: 100%; 
      height: 50%; 
       background: #ffd800; 
       text-align: left; 
    } 
    .result { 
       width: 100%; 
       height: 50%; 
      background: #b6ff00; 
       text-align: left; 
     } 
   </style> 
 </head> 
 <body> 
   <div id="test" class="test">事件区域</div> 
   <div id="result" class="result">事件结果：按压超过500ms触发<br /></div> 
  <script type="text/javascript"> 
     //创建一个新的hammer对象并且在初始化时指定要处理的dom元素 
     var hammertime = new Hammer(document.getElementById("test")); 
    //添加事件 
    hammertime.on("press", function (e) { 
      document.getElementById("result").innerHTML += "超过500ms了<br />"; 
      //控制台输出 
      console.log(e); 
     }); 
   </script> 
</body> 
</html>

效果如下：

 移动端脚本框架Hammer.js

4、Rotate

代码如下：

<!DOCTYPE html> 
 <html> 
<head> 
  <meta name="viewport" content="width=device-width" /> 
  <title>Rotate</title> 
  <script src="/Script/hammer.js"></script> 
  <style type="text/css"> 
    html, body { 
      width: 100%; 
      height: 100%; 
      margin: 0px; 
       padding: 0px; 
    } 
    .test { 
      width: 100%; 
       height: 50%; 
      background: #ffd800; 
       text-align: left; 
     } 
     .result { 
       width: 100%; 
       height: 50%; 
      background: #b6ff00; 
       text-align: left; 
     } 
  </style> 
 </head> 
 <body> 
  <div id="test" class="test">事件区域</div> 
<div id="result" class="result">事件结果：旋转触发<br /></div> 
  <script type="text/javascript"> 
    //创建一个新的hammer对象并且在初始化时指定要处理的dom元素 
     var hammertime = new Hammer(document.getElementById("test")); 
     //为该dom元素指定触屏移动事件 
    hammertime.add(new Hammer.Rotate()); 
     //添加事件 
    hammertime.on("rotate", function (e) { 
       document.getElementById("result").innerHTML += "X偏移量：【" + e.deltaX + "】，Y偏移量：【" + e.deltaY + "】<br />"; 
       //控制台输出 
       console.log(e); 
     }); 
   </script> 
 </body> 
 </html>

效果如下：

 移动端脚本框架Hammer.js

5、Swipe

代码如下：

<!DOCTYPE html> 
<html> 
 <head> 
  <meta name="viewport" content="width=device-width" /> 
  <title>Swipe</title> 
  <script src="/Script/hammer.js"></script> 
  <style type="text/css"> 
    html, body { 
      width: 100%; 
       height: 100%; 
      margin: 0px; 
      padding: 0px; 
     } 
    .test { 
       width: 100%; 
      height: 50%; 
      background: #ffd800; 
       text-align: left; 
    } 
    .result { 
       width: 100%; 
      height: 50%; 
       background: #b6ff00; 
       text-align: left; 
    } 
  </style> 
 </head> 
 <body> 
   <div id="test" class="test">事件区域</div> 
  <div id="result" class="result">事件结果：向左滑动触发<br /></div> 
   <script type="text/javascript"> 
    //创建一个新的hammer对象并且在初始化时指定要处理的dom元素 
     var hammertime = new Hammer(document.getElementById("test")); 
    //添加事件 
    hammertime.on("swipeleft", function (e) { 
      document.getElementById("result").innerHTML += "X偏移量：【" + e.deltaX + "】，Y偏移量：【" + e.deltaY + "】<br />"; 
       //控制台输出 
       console.log(e); 
     }); 
  </script> 
 </body> 
</html>

效果如下： 

 移动端脚本框架Hammer.js

6、Tab

代码如下：

<!DOCTYPE html> 
 <html> 
 <head> 
  <meta name="viewport" content="width=device-width" /> 
  <title>Tap</title> 
  <script src="/Script/hammer.js"></script> 
  <style type="text/css"> 
    html, body { 
       width: 100%; 
       height: 100%; 
       margin: 0px; 
      padding: 0px; 
     } 
    .test { 
       width: 100%; 
      height: 50%; 
       background: #ffd800; 
      text-align: left; 
     } 
    .result { 
       width: 100%; 
      height: 50%; 
      background: #b6ff00; 
      text-align: left; 
    } 
  </style> 
 </head> 
 <body> 
   <div id="test" class="test">事件区域</div> 
   <div id="result" class="result">事件结果：点击触发<br /></div> 
   <script type="text/javascript"> 
     //创建一个新的hammer对象并且在初始化时指定要处理的dom元素 
     var hammertime = new Hammer(document.getElementById("test")); 
    //添加事件 
     hammertime.on("tap", function (e) { 
      document.getElementById("result").innerHTML += "点击触发了，长按无效<br />"; 
       //控制台输出 
      console.log(e); 
     }); 
  </script> 
 </body> 
 </html>

效果如下：

 移动端脚本框架Hammer.js

上述的实例还是有所区别的。在Pinch事件和Rotate事件中，我们用了hammertime.add(new Hammer.Pinch());和hammertime.add(new Hammer.Rotate ());而其他四个事件没有用，而是直接添加了事件的监听程序。原因在于，我们在new Hammer(htmlElement)的时候，Hammer.js默认对Pan、Press、Swipe和Tab事件进行了监听。但没有对Pinch和Rotate事件进行监听。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

移动端脚本框架Hammer.js

- Author -

A_山水子农

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JavaScript异步编程:异步数据收集的具体方法
Aug 19 Javascript
关于jQuery中.attr()和.prop()的问题探讨
Sep 06 Javascript
jquery提交form表单简单示例分享
Mar 03 Javascript
JS使用getComputedStyle()方法获取CSS属性值
Apr 23 Javascript
使用jquery prev()方法找到同级的前一个元素
Jul 11 Javascript
JavaScript获取鼠标移动时的坐标(兼容IE8、chome谷歌、Firefox)
Sep 13 Javascript
jquery图片播放浏览插件prettyPhoto使用详解
Dec 19 Javascript
学习JavaScript设计模式(策略模式)
Nov 26 Javascript
js控制文本框只能输入中文、英文、数字与指定特殊符号的实现代码
Sep 09 Javascript
JavaScript仿微博输入框效果(案例分析)
Dec 06 Javascript
Vue3 中的数据侦测的实现
Oct 09 Javascript
Web应用开发TypeScript使用详解
May 25 Javascript
WEB开发之注册页面验证码倒计时代码的实现
Dec 15 #Javascript
浅谈javascript alert和confirm的美化
Dec 15 #Javascript
JavaScript模板引擎Template.js使用详解
Dec 15 #Javascript
原生JS实现图片轮播切换效果
Dec 15 #Javascript
javascript中数组（Array)对象和字符串（String)对象的常用方法总结
Dec 15 #Javascript
利用vue写todolist单页应用
Dec 15 #Javascript
jquery插件bootstrapValidator表单验证详解
Dec 15 #Javascript
数调机(1) 频率(1) RP-F11(1) 手调机(1) SONY(15) TOSHIBA(1) 东芝(1) ICF-7600(1) 高放电路(1) 德劲(5)
You might like
给多个地址发邮件的类
2006/10/09 PHP
php实现模拟post请求用法实例
2015/07/11 PHP
php支付宝APP支付功能
2020/07/29 PHP
thinkphp5修改view到根目录实例方法
2019/07/02 PHP
PHP中isset、empty的用法与区别示例详解
2020/11/05 PHP
js left,right,mid函数
2008/06/10 Javascript
jquery判断单个复选框是否被选中的代码
2009/09/03 Javascript
jquery cookie实现的简单换肤功能适合小网站
2013/08/25 Javascript
js实现两个值相加alert出来精确到指定位
2013/09/25 Javascript
jquery easyui 对于开始时间小于结束时间的判断示例
2014/03/22 Javascript
13 款最热门的 jQuery 图像 360 度旋转插件推荐
2014/12/09 Javascript
javascript定义变量时加var与不加var的区别
2014/12/22 Javascript
利用JS生成博文目录及CSS定制博客
2016/02/10 Javascript
JavaScript动态生成二维码图片
2016/04/20 Javascript
使用vue.js2.0 + ElementUI开发后台管理系统详细教程（二）
2017/01/21 Javascript
Node.js 实现简单的接口服务器的实例代码
2017/05/23 Javascript
移动端触摸滑动插件swiper使用方法详解
2017/08/11 Javascript
微信小程序顶部可滚动导航效果
2017/10/31 Javascript
React事件处理的机制及原理
2018/12/03 Javascript
浅谈JavaScript_DOM学习篇_图片切换小案例
2019/03/19 Javascript
详解微信小程序的不同函数调用的几种方法
2019/05/08 Javascript
js滚轮事件 js自定义滚动条的实现
2020/01/18 Javascript
Vue事件处理原理及过程详解
2020/03/11 Javascript
彻底搞懂并解决vue-cli4中图片显示的问题实现
2020/08/31 Javascript
Python开发实例分享bt种子爬虫程序和种子解析
2014/05/21 Python
python分块读取大数据,避免内存不足的方法
2018/12/10 Python
解决Python3 被PHP程序调用执行返回乱码的问题
2019/02/16 Python
深入浅析Python 中 is 语法带来的误解
2019/05/07 Python
python 执行终端/控制台命令的例子
2019/07/12 Python
Python如何使用k-means方法将列表中相似的句子归类
2019/08/08 Python
Pytest如何使用skip跳过执行测试
2020/08/13 Python
世界第一曲奇连锁店：Mrs. Fields Cookies
2017/02/04 全球购物
海洋科学专业求职信
2014/08/10 职场文书
小学运动会入场词
2015/07/18 职场文书
德能勤绩工作总结
2015/08/11 职场文书
2019年最新证婚词精选集！
2019/06/28 职场文书