注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

梦幻雪冰

技在手,能在身,思在脑,从容过生活——陈能堡

 
 
 

日志

 
 

【转载】移动端gesture事件 以及 事件类库hammer.js  

2014-11-02 13:02:16|  分类: 移动端专题 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
移动端gesture事件 以及 事件类库hammer.js
  之所以写这篇文章,源于两个原因。其一,在于在网络上查找了大量的gesture事件的知识,能够查找到的就是gesture的基本方法,但是实在是找不到支持程度。原因之二,是阅读了一下hammer.js的英文文档(虽然英语水平不好,但是阅读技术类的文档倒还算是凑合),做了一下总结,写出来与大家分享一下。

支持程度:
gesture事件,指的是平时移动端的基本手势。手势事件存在gesturestart、gesturemove、gestureend。
经过查阅资料以及在手机端的实际测试,得出如下结论:在IOS2.0中的safari当中引入了手势事件,但是在安卓平台,是不支持的(即便使用谷歌浏览器也没有用)。对于IE9+的版本也提供了gesture的支持,但是需要加前缀MS。
当手指放置在屏幕上的时候,发生了如下的情况:
当一个手指放置在屏幕上的时候,触发touchstart事件,如果另一个手指又放置在了屏幕上,会触发gesturestart事件,随后触发第二个手指的touchstart事件。
每个手势事件的event对象都包含了标准的鼠标事件属性:bubbles cancelable clientX clientY screenX screenY 等。同时还包含了两个额外的属性,分别是rotation以及scale。rotation表示手指变化引起的旋转角度,负值表示逆时针旋转,正值表示顺时针旋转。scale表示两个手指头之间的距离变化情况,这个值从1开始,随着距离的拉大而增长,随着距离的缩短而减小。
注意:触摸事件也会返回rotation和scale这两个属性,但是这两个属性只有在两个手指与屏幕保持接触的时候才会发生变化。
原生的gesture事件需要进行各种处理和判断,从而确定用户到底用手指进行了什么操作。加上原生gesture的兼容问题严重,因此很少有人使用。在真正开发当中,有人会使用touch.js的插件来实现。(touch.js可以参见如下两个网址:http://touch.code.baidu.com/ http://cloudajs.org/docs/step4_API_Documentation#h2_7 分别是touch.js的主页以及API文档)。还有人会使用hammer.js的框架来实现。关于touch.js,API文档是中文,尝试了一下,感觉也挺不错的,大家完全可以查看文档进行学习,因此在这里就先不讲解了。
欢迎互相沟通交流~独行冰海

hammer.js框架
在hammer.js框架当中,为我们提供的几个方法是:
Pan   单指 触碰(可以进行轻微的摩擦)  一个手指就能够触发 阈值10
包含了panstart、panmove、panend、pancancel、panleft、panright、panup、pandown
Pinch 两个手指头  捏~ 在识别之前最小的值是0
包含了pinchstart、pinchmove、pinchend、pinchcancel、pinchin (用于缩小)、pinchout (用于放大)
Press 单指 长按 500毫秒以上才可以 运动最小距离5 只有press事件
Rotate 两只手指头 默认旋转角度0
包含了rotatestart、rotatemove、rotateend、rotatecancel
Swipe 单指 滑动 阈值10 大于0.65px/ms的速度才可以触发
包含了swipeleft、swiperight、swipeup、swipedown
Tap 两下的轻敲 两次的差异在10之内 间隔在300毫秒之内 一次按下的时间不大于250ms 才可以触发

基本的使用方法:
引入hammer.min.js文件
为需要增加手势功能的元素/标签,进行实例化,在默认情况下,仅仅增加了水平方向上的识别功能

var mc = new Hammer(ele);

之后需要让在垂直方向上也能够识别pan的事件

mc.get('pan').set({ direction: Hammer.DIRECTION_ALL });

(注意:测试中没有什么差别-测试机器:iPhone5S、Android4.0、Android4.2)
最后绑定事件,并执行相应功能即可
mc.on("panleft panright panup pandown tap press", function(e) {
    wrap.textContent = e.type +" gesture detected.";
});
使用谷歌浏览器打印出参数event的内容,如下:
移动端gesture事件 以及 事件类库hammer.js - 独行冰海 - 独行冰海
 

欢迎互相沟通交流~独行冰海
  评论这张
 
阅读(87)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017