插件: Hammer.js

插件: Hammer.js

官网：

http://hammerjs.github.io/ 　　hammer.js 官网

http://hammerjs.github.io/api/　　官网API（官网写的实在太简了！不好用。注意里面关键字，另外还得搜索引擎查相关文章）　　2015-12-9

下载：

http://hammerjs.github.io/dist/hammer.js

http://hammerjs.github.io/dist/hammer.min.js 　　下载hammer.js   v2.0.4　　2015-11-13

文章：

http://www.cnblogs.com/iamlilinfeng/p/4239957.html 　　教程及示例：移动端脚本框架，他可以完美的实现在移端开发的大多数事件，如：点击、滑动、拖动、多点触控等事件。不需要依赖任何其他的框架　　下载教程DEMO源码

http://hammerjs.github.io/getting-started/　　2015-11-20

http://www.awesomes.cn/repo/hammerjs/hammer-js　　关于hammer的一些介绍和下载　　2015-12-9

http://www.tuicool.com/articles/VNRjym7 　　移动端手势库hammerJS 2.0.4官方文档翻译（重要！ swipeup 和swipedown无效的问题是参考此文解决的）　　2015-12-9

http://www.cnblogs.com/aaronjs/p/4024819.html 　　移动开发框架剖析(一) Hammer专业的手势控制　　2015-12-9

http://www.cnblogs.com/aaronjs/p/4029304.html 　　移动开发框架剖析(二) Hammer专业的手势控制　　2015-12-9

 

---

 

1、Pan事件：（事件：触屏中的拖动）

　　在指定的dom区域内，一个手指放下并移动事件，即触屏中的拖动事件。这个事件在屏触开发中比较常用，如：左拖动、右拖动等，如手要上使用QQ时向右滑动出现功能菜单的效果。该事件还可以分别对以下事件进行监听并处理：
　　pan：拖动
　　panleft：向左拖动
　　panright：向右拖动
　　panup：向上拖动
　　pandown：向下拖动

　　panstart：拖动开始
　　panmove：拖动过程
　　panend：拖动结束
　　pancancel：拖动取消

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区域内，一个手指快速的在触屏上滑动。即我们平时用到最多的滑动事件。
　　swipe：滑动
　　swipeleft：向左滑动
　　swiperight：向右滑动
　　swipeup：向上滑动　　（注意：默认写法，左右滑动有效，但上下滑动时，会出现swipeup和swipedown无效的问题。所以要加下面代码！）2015-12-9
　　swipedown：向下滑动

var hammertime = new Hammer(document.getElementById("test"));
//若要允许识别器识别垂直方位或全部方位的 pan 和 swipe，可以加这两句:
hammertime.get('pan').set({ direction: Hammer.DIRECTION_ALL });
hammertime.get('swipe').set({ direction: Hammer.DIRECTION_ALL});　　//DIRECTION_VERTICAL:放开up down事件　　DIRECTION_HORIZONTAL:放开left right事件
hammertime.on("swipe", function (e) {
    console.log("swipe :  X偏移："+e.deltaX+", Y偏移："+ e.deltaY);
});

 

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

 

---

来源于：http://hammerjs.github.io/api/

Name　　　　　　 　　Value
type 　　　　　　      事件的名称，比如 panstart
deltaX 　　　　　　   X坐标轴上的移动距离
deltaY 　　　　　　   Y坐标轴上的移动距离
deltaTime 　　　　    交互过程的总时长（毫秒）
distance 　　　　　　 移动距离
angle 　　　　 　　　 移动角度
velocityX 　　　　　　在X坐标轴上的移动速率，单位为px/ms
velocityY 　　　　　　在Y坐标轴上的移动速率，单位为px/ms
velocity 　　　　  　　X/Y上最高的速率值
direction 　　　　      移动方位，匹配 DIRECTION 常量
offsetDirection 　　   从起始点算起的移动方位。匹配DIRECTION常量
scale 　　　　　　     多点触摸结束时的缩放比例，若为单点触摸则为1
rotation 　　　　　　 多点触摸结束时的缩放比例，若为单点触摸则为0
center 　　　　　　   多点触摸的中心位置，或者单点的坐标————（用到）
srcEvent 　　　　　　源事件对象，类型为TouchEvent，MouseEvent或PointerEvent.
target 　　　　　   　 接收事件的目标
pointerType 　　 　　基本的指针类型，可以为touch，mouse，pen，或kinect
eventType 　　　   　事件类型，匹配INPUT常量
isFirst　　　　　　　　true 表示当前交互为首次交互
isFinal　　　　　　　  true 表示当前交互为最后一次交互
pointers 　　　　       由指针类型组成的数组，包含了最终指针类型（touchend,mouseup）
changedPointers 　　 由new/moved/lost 指针类型组成的数组
preventDefault 　　　参考srcEvent.preventDefault()方法。主要给熟手使用的

---

 

事件：

Hammer.on(window, "load resize scroll", function(ev) {
    console.log(ev.type);
});

 

 

..

posted on 2015-11-13 13:22 bjhhh 阅读( ...) 评论( ...) 编辑 收藏

转载于:https://www.cnblogs.com/qq21270/p/4961868.html