Hammer.js
朋友炒股两个月赚了10万，我帮他推广一下公众号，把钱用来投资总比放银行连通货膨胀都跑不过里强， 硬核离职，在家炒股 ，这是他每天的日志，有些经验是花钱也买不到的。
一、前言
移动端框架当前还处在初级阶段，但相对于移动端的应用来说已经有很长时间了。虽然暂时还没有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事件进行监听。
五、源码下载
六、后纪（请看18楼-25楼的回复）
关于hammer.js的swipeup事件不触发，原因是hammer.js在创建一个新对象时默认会添加些常用事件(详细见：http://hammerjs.github.io/getting-started/)。注意，是常用事件，而不是全部事件。swipe事件官方说是在常用事件内，但实际不在常用事件内。因此，要对这些非常用事件单独做监听，伪代码如下所示：
var hammertime = new Hammer(document.getElementById("test"));
hammertime.add(new Hammer.Swipe());
hammertime.on("swipeup",function(){.......})
当一个对象需要多个事件时，经官方api和测试结果，需要对一个事件添加多个监听，伪代码如下所示：
var hammertime = new Hammer(document.getElementById("test"));
hammertime.add(new Hammer.Swipe());
hammertime.on("swipeup",function(){.......})
var hammertime1 = new Hammer(document.getElementById("test"));
hammertime.on("swipeleft",function(){.......})
关于多事件绑定hammer.js官网当前版本并未给出好的写法，希望以后的版本能出现吧。
版权：http://www.cnblogs.com/iamlilinfeng
Hammer.js的更多相关文章
- H5案例分享：JS手势框架 —— Hammer.js
JS手势框架 -- Hammer.js 一.hammer.js简介 hammerJS是一个开源的,轻量级的触屏设备javascript手势库,它可以在不需要依赖其他东西的情况下识别触摸,鼠标事件.允许 ...
- 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 ...
- Hammer.js分析（四）——recognizer.js
不同识别器会使用不同逻辑,根据从相关Input类获取到的事件对象和事件,实现自定义的触屏事件,例如tap.pinch等. 一.继承关系 Recognizer与前面的Input一样,也相当于是个抽象类. ...
- Hammer.js分析（三）——input.js
input.js是所有input文件夹中类的父类,浏览器事件绑定.初始化特定的input类.各种参数计算函数. Input父类和其子类就是在做绑定事件,各种参数计算.整合.设置等返回自定义事件对象,交 ...
- Hammer.js分析（二）——manager.js
“Manager”是所有识别器实例的容器,它为你设置的元素安装了交互事件监听器,并设置了触摸事件特性. manager.js中的代码会涉及到input.js和recoginzer.js中的内容,这里会 ...
- Hammer.js分析（一）——基础结构
从github上面将源码下载下来,会发现有个src文件夹.当前版本是2.0.6. 总的结构如下: 一.常量 这里将常量全部列在一起是可以在对比源码的时候,更方便的查看相应内容. var VENDOR_ ...
- hammer用法 jquery.hammer.js
jquery.hammer.js使用时要先引入hammer.min.js 下面代码是滑动效果: $("#nav").hammer().bind('swiperight', fu ...
- hammer.js的六大事件
1.Pan事件:在指定的dom区域内,一个手指放下并移动事件,即触屏中的拖动事件.这个事件在触屏开发中比较常用: Panstart 拖动开始 Panmove 拖动过程 Panend 拖动结束 Panc ...
- 利用轮播原理结合hammer.js实现简洁的滑屏功能
最近有个任务,做一个非常小的h5的应用,只有2屏,需要做横向的全屏滑动切换和一些简单的动画效果,之前做这种东西用的是fullpage.js和jquery,性能不是很好,于是就想自己动手弄一个简单的东西 ...
随机推荐
- python 学习随笔
要求: 用户输入一个数,比如输入387. 需要把387打乱,然后将这三个数组合成最大数输出. 如果最大值和用户输入的等大,输出-1. 方法一: #!/user/bin/env python # _*_ ...
- HTML5 canvas处理图片的各种效果，包括放大缩小涂鸦等
http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/201502151385.html jQuery 缩放 旋转 裁剪图片 Image Cropper ...
- shmop ftok
http://blog.csdn.net/heiworld/article/details/25426723 对于ftok的理解 http://www.jb51.net/article/510 ...
- c++初步实现的一个LRU
#include<iostream>#include<map> using namespace std; typedef struct Node{ int data; stru ...
- Failed to load resource: the server responded with a status of 500 (Internal Server Error)
错误提示: 原因: MIME类型错误. 之前添加json.woff.woff2映射,更换系统(Win7升Win10)后配置失效,在webconfig中删除映射即可,因为Win10自带上面3个MIME映 ...
- djangocms安装技巧
首先python的版本要高一些,否则安装django-cms会报错 安装cmsinstaller不能够正常下载 利用virtualenv进行安装配置 注意中文的配置 djangocms配置中文 dja ...
- laravel安装学习步骤
在看知乎比较php框架的优劣的时候提到为什么laravel这么好国内用的少,还有就是yii2,有人提到原因就是composer在国内无法使用.这制约了使用composer进行包管理的框架在国内的传播和 ...
- 《构建之法》8&16
[8.1] 对产品的生命周期管理好像一直以来都没有引起我足够的重视,在这一段对产品学习的过程中也少有看到相关内容.是因为针对不同产品而言,产品周期的管理太具有个性特征,没有太统一的规则可循吗?我觉得不 ...
- 使用python操作FTP上传和下载
函数释义 Python中默认安装的ftplib模块定义了FTP类,其中函数有限,可用来实现简单的ftp客户端,用于上传或下载文件,函数列举如下 ftp登陆连接 from ftplib import F ...
- redhat samba匿名登录服务器搭建
smb服务器只需要yum install samba 安装起,并修改配置文件就可以匿名使用了. smb配置文件,这里允许匿名登录.红色部分代表我共享出来文件夹参数code [root@localh ...