移动端脚本框架Hammer.js

2024-10-30 07:36:25

一、前言

移动端框架当前还处在初级阶段，但相对于移动端的应用来说已经有很长时间了。虽然暂时还没有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大事件进行监听。如下图所示：

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>

效果如下：

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>

效果如下：

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>

效果如下：

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>

效果如下：

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>

效果如下：

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>

效果如下：

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

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

zepto.js中tap事件阻止冒泡的实现方法

本文实例讲述了zepto.js中tap事件阻止冒泡的实现方法.分享给大家供大家参考.具体如下: 最近在弄一个手机版的网站,本来想用jQuery Mobile,但文件太大了,所以用了zepto.js 由于移动网页中使用click事件会有延迟,所以就用上了zepto.js中的tap事件. 使用click事件可以使用stopPropagation来阻止冒泡,但tap使用该方法无效现在我需要实现这样一个效果:点击a.btn这个按钮,然后显示div.panel,当我点击非div.panel时隐藏div.
jQuery插件zepto.js简单实现tab切换

老规矩,先贴代码 <script> $(function(){ window.onload = function() { var $li = $('.taocan-title li'); var $ul = $('.taocan-content .con110'); $li.mouseover(function(){ var $this = $(this); var $t = $this.index(); $li.removeClass(); $this.addClass('active');
移动端js触摸事件详解

在移动开发中,一种较为容易的做法是,先在桌面上开始原型设计,然后再在打算要支持的设备上处理移动特有的部分.多点触摸正是难以在PC上进行测试的那些功能之一,因为大部分的PC都没有触摸输入. 不得不在移动设备上进行的测试有可能会拉长你的开发周期,因为你所做的每项改变都需要提交代码到服务器上,接着再加载到设备上.然后,一旦运行后,对应用也就没有太多的调试了,因为平板电脑和智能手机都很缺乏web开发者所用的工具. 这个问题的一个解决方案是在开发机器上模拟触发事件.对于单点触摸,触摸事件可以基于鼠标事件来
基于touch.js手势库+zepto.js插件开发图片查看器（滑动、缩放、双击缩放）

最近由于公司项目需要图片查看器,网上搜了一圈,感觉资料很少,所以决定基于百度的touch.js手势库+zepto.js自己写了一个小插件,实现了左右滑动,双指缩放,双击缩放功能,基本使用还行,但是有时候还是不太顺畅,后续会慢慢完善:写的不好的地方望各位能够给出好的建议,谢谢! 源码地址:https://github.com/GLwen/molong_photoSwipe.git 演示:http://runjs.cn/detail/iceaaogh molong.css *{padding:0;m
Hammer.js+轮播原理实现简洁的滑屏功能

最近有个任务,做一个非常小的h5的应用,只有2屏,需要做横向的全屏滑动切换和一些简单的动画效果,之前做这种东西用的是fullpage.js和jquery,性能不是很好,于是就想自己动手弄一个简单的东西来实现.最后我用zepto + hammer.js 和轮播的方式解决了这个问题,效果还不错,整个页面不开启Gzip时所有资源请求的数据大小为200KB左右.这篇文章总结下这个方法的实现思路. 效果演示: 1. 实现要点 1)滑屏借鉴bootstrap的carousel插件,不过完全没有它那个复杂,只
js移动端事件基础及常用事件库详解

一.事件基础 PC:click.mouseover.mouseout.mouseenter.mouseleave.mousemove.mousedown.mouseup.mousewheel.keydown.keyup.load.scroll.blur.focus.change... 移动端:click(单击).load.scroll.blur.focus.change.input(代替keyup.keydown)...TOUCH事件模型(处理单手指操作).GESTURE事件模型(处理多手指操作
浅谈移动端之js touch事件手势滑动事件

现分享一篇关于touch的文章,望指教! 原理: 当开始一个touchstart事件的时候,获取此刻手指的横坐标startX和纵坐标startY: 当触发touchmove事件时,在获取此时手指的横坐标moveEndX和纵坐标moveEndY;最后,通过这两次获取的坐标差值来判断手指在手机屏幕上的滑动方向. 具体代码如下: $("body").on("touchstart", function(e) { e.preventDefault(); startX = e.
touch.js 拖动、缩放、旋转（鼠标手势）功能代码

可以实现手势操作:拖动.缩放.旋转.封装好的脚本方法是这样的: var cat = window.cat || {}; cat.touchjs = { left: 0, top: 0, scaleVal: 1, //缩放 rotateVal: 0, //旋转 curStatus: 0, //记录当前手势的状态, 0:拖动, 1:缩放, 2:旋转 //初始化 init: function ($targetObj, callback) { touch.on($targetObj, 'touchsta
基于zepto.js简单实现上传图片

效果如下: html: <div class="otherPic"> <div id="showOtherImage"></div> <span class="pull-left position_relative" id="openIdCardImg"> <span class="icon color-blue addPic"></spa
基于zepto.js实现仿手机QQ空间的大图查看组件ImageView.js详解

调用方式 :ImageView(index,imgData) --index参数为图片默认显示的索引值,类型为Number --imaData参数为图片url数组 ,类型为Array 使用之前要先引入 zepto.js 文件 ImageView.js具体代码如下: 复制代码代码如下: /* * ImageView v1.0.0 * --基于zepto.js的大图查看 * --调用方法 ImageView(index,imgDada) * --index 图片默认值显示索引,N

移动端脚本框架Hammer.js

相关推荐

随机推荐