hammer.js 一个多点触摸手势库

从http://www.cnblogs.com/iamlilinfeng/p/4239957.html处转载

一、什么是hammer.js?

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

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

二、hammer.js的架构

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、top

代码片段：

<!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事件进行监听。

四、源码

案例源码下载：http://download.csdn.net/download/tivonalh/9930795

H5案例使用源码：http://download.csdn.net/download/tivonalh/9930799

hammer.js 一个多点触摸手势库相关推荐

移动开发框架，第【二】弹：Hammer.js 移动设备触摸手势js库
hammer.js是一个多点触摸手势库,能够为网页加入Tap.Double Tap.Swipe.Hold.Pinch.Drag等多点触摸事件,免去自己监听底层touchstart.touchmove. ...
hammer.js移动端开发手势库
原文转载自https://www.cnblogs.com/vajoy/p/4011723.html hammerJS是一个优秀的.轻量级的触屏设备手势库,现在已经更新到2.04版本,跟1.0版本有点天 ...
ipados远程linux软件,JingOS Linux平板系统v0.6下载发布支持多点触摸手势
原标题:JingOS Linux 平板系统 v0.6 下载发布:iPadOS 风格,附安装方法 1月29日消息今年1月份,一款新的操作系统 JingOS 官网上线,官方介绍是全球首个 iPadOS ...
android多点触摸手势,安卓手势学习笔记（三）多点触控
8种机械键盘轴体对比本人程序员,要买一个写代码的键盘,请问红轴和茶轴怎么选? 跟踪多个触点当多个手指同时触碰屏幕时,系统产生如下的事件:ACTION_DOWN –第一个触点.它启动了手势,在Mot ...
Hammer.js移动端触屏框架的使用
hammer.js是一个多点触摸手势库,能够为网页加入Tap.Double Tap.Swipe.Hold.Pinch.Drag等多点触摸事件,免去自己监听底层touchstart.touchmove. ...
基于Visual C++2010与windows SDK fo windows7开发Windows 7的多点触摸特性应用程序(1)
2008年5月28日,微软即将退休的精神领袖比尔·盖茨和首席执行官史蒂夫·鲍尔默共同在北圣地亚哥四季艾维亚拉洲际度假村举办的2008 D6 All Things数字化大会上向到场的嘉宾展示了windo ...
Android 触摸手势基础官方文档概览
触摸手势检测基础手势检测一般包含两个阶段: 1.获取touch事件数据 2.解析这些数据,看它们是否满足你的应用所支持的某种手势. 相关API: MotionEvent 兼容版的: MotionEv ...
Unity3D 游戏引擎之实现平面多点触摸（二）
Unity游戏引擎之实现平面多点触摸雨松MOMO原创文章如转载,请注明:转载至我的独立域名博客雨松MOMO程序研究院,原文地址:http://www.xuanyusong.com/archives/ ...
移动端手势库Hammer.js学习
感觉移动端原生支持的 touch.tap.swipe 几个事件好像还不够用,某些时候还会用到诸如缩放.长按等其他功能. 近日学习了一个手势库 Hammer.js,它是一个轻量级的触屏设备手势库,能识别 ...

hammer.js 一个多点触摸手势库

hammer.js 一个多点触摸手势库相关推荐

最新文章

热门文章