移动端脚本框架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事件进行监听。

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

Javascript 相关文章推荐
Tinymce+jQuery.Validation使用产生的BUG
Mar 29 Javascript
JS 操作符整理[推荐收藏]
Nov 15 Javascript
JS跨域代码片段
Aug 30 Javascript
javascript上传图片前预览图片兼容大多数浏览器
Oct 25 Javascript
如何通过js实现图片预览功能【附实例代码】
Mar 30 Javascript
js删除数组元素、清空数组的简单方法(必看)
Jul 27 Javascript
详解Angular.js的$q.defer()服务异步处理
Nov 06 Javascript
深入理解jQuery()方法的构建原理
Dec 05 Javascript
bootstrap模态框远程示例代码分享
May 22 Javascript
Vue函数式组件的应用实例详解
Aug 30 Javascript
React实现全选功能
Aug 25 Javascript
js+for循环实现字符串自动转义的代码(把后面的字符替换前面的字符)
Dec 24 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
You might like
动易数据转成dedecms的php程序
2007/04/07 PHP
PHP获取MAC地址的具体实例
2013/12/13 PHP
四个常见html网页乱码问题及解决办法
2015/09/08 PHP
PHP实现实时生成并下载超大数据量的EXCEL文件详解
2017/10/23 PHP
xml 与javascript结合的问题解决方法
2007/03/24 Javascript
Jquery iframe内部出滚动条
2010/02/11 Javascript
如何通过javascript操作web控件的自定义属性
2013/11/25 Javascript
jQuery+css实现炫目的动态块漂移效果
2016/01/28 Javascript
jquery表单提交带错误信息提示效果
2017/03/09 Javascript
微信小程序实现动态设置placeholder提示文字及按钮选中/取消状态的方法
2017/12/14 Javascript
基于jQuery实现Ajax验证用户名是否可用实例
2018/03/25 jQuery
vue操作动画的记录animate.css实例代码
2019/04/26 Javascript
微信小程序引入VANT组件的方法步骤
2019/09/19 Javascript
layui table复选框禁止某几条勾选的实例
2019/09/20 Javascript
在Vue中实现随hash改变响应菜单高亮
2020/03/09 Javascript
谈谈JavaScript令人迷惑的==与+
2020/08/31 Javascript
vue路由的配置和页面切换详解
2020/09/09 Javascript
重命名批处理python脚本
2013/04/05 Python
Python实现3行代码解简单的一元一次方程
2014/08/18 Python
Python实现删除当前目录下除当前脚本以外的文件和文件夹实例
2015/07/27 Python
对python中的pop函数和append函数详解
2018/05/04 Python
对python 多个分隔符split 的实例详解
2018/12/20 Python
浅谈Python中eval的强大与危害
2019/03/13 Python
python+os根据文件名自动生成文本
2019/03/21 Python
使用pygame编写Flappy bird小游戏
2020/03/14 Python
pycharm设置默认的UTF-8编码模式的方法详解
2020/06/01 Python
Python字符串及文本模式方法详解
2020/09/10 Python
世界上最大的铁人三项商店:Tri UK
2020/11/04 全球购物
打架检讨书2000字
2014/02/22 职场文书
有多年工作经验的自我评价
2014/03/02 职场文书
驾驶员培训方案
2014/05/01 职场文书
捐献物资倡议书范文
2014/05/19 职场文书
常务副总经理任命书
2014/06/05 职场文书
庆六一活动总结
2014/08/29 职场文书
2014教师个人自我评价范文
2014/09/13 职场文书
2015年社区矫正工作总结
2015/04/21 职场文书