找回密码
 注册加入

扫一扫,极速登录

QQ登录

只需一步,快速开始

搜索
查看: 8570|回复: 1

JavaScript多触式手势处理

[复制链接]
TA的专栏
发表于 2012-12-16 16:21:47 | 显示全部楼层 |阅读模式
理解手势

在众多的多触式移动设备中,手势包括单手指点击、双击、轻拂,双手指分开、合闭、旋转等。
手势是指包括单手指和双手指一切能在屏幕上操作的一系列动作,分为简单手势和复杂手势。

简单手势既单手指在屏幕上点击、双击、轻拂所发生的一系列动作;
复杂手势既双手指在屏幕上分开、合闭、旋转所发生的一系列动作;

简单手势事件

场景:手指在屏幕“点击”(放下后迅速提起)。
手势结束后会发生什么呢?
点击(click)事件是肯定会有的,但是在发生点击(click)之前还会有哪些事情要处理呢?
从右图可以看出,在手指提起时并没有马上触发点击(click)事件,而是对页面进行一次事件检测,检测页面上是否有绑定了事件(click/mousedown/mouseup)的元素(element)。
首先触发的是mouseover和mousemove事件,事件触发时系统会判断事件元素(click element),当事件元素(click element)的内容被改变时,将不再继续后面的事件处理;反之,事件元素(click element)没有被改变,则按照mousedown > mouseup > click 的顺序执行。
这时一次简单的手势事件基本上已经完成了,为什么说基本上完成呢?或许有同学就会问了,mouseout事件呢?
对,这里完成一次简单“点击”后并不会触发mouseout事件,那mouseout事件什么时候才触发呢?
当你再点击另一个事件元素(click element)时就会触发上一个事件元素(click element)的mouseout
事件了。
如果手指放下后不提起这时候会发生什么呢?
什么都不发生,如果当前按下的是一个连接,就会弹出一个菜单,比如“在新窗口打开”……
如果是文字会显示操作工具条,可以复制、搜索选择中的文字。等等……
3980579695.png


Touch Events

Touch Events是触屏设备专有事件驱动,在IPhone/Android系统中的Webkit内核浏览器都完美支持此事件,以下是Touch Events表。
系统
touchstart
touchmove
touchend
iOS
Y
Y
Y
Android
Y
Y
Y

常用事件绑定
  • touchstart      // 手指放到屏幕时触发,等价于鼠标事件的mousedown;
  • touchmove     // 手指在屏幕上滑动时触发,等价于鼠标事件的mosemove;
  • touchend       // 手指离开屏幕时触发,等价于鼠标事件的moseup;



touchstart > touchmove > touchend

例子:
document.addEventListenter(‘touchstart’, function(event){
     console.log(event.touches.length);
},false);

例子中监听了touchstart事件,并打印出事件对象的长度。Touch Event 包含了一个数组对象 touches ,touches 保存着屏幕上所有的touch。
在Android系统中,touches 的长度始终都等于1,所以event.touches[0] === event.touch。数组对象 touches 更多用在iOS多点触摸的处理中。

“点击”(click)事件怎么办?

从Touch Events事件处理来看,并不触发点击(click)事件,那click和touch又是如何处理的?
Touch Events的执行优先级高于点击(click),当手指放到屏幕上时先触发的是touchstart,离开时也是先触发touchend;点击(click)事件的触发时间是在touchstart/touchend之后,也就是说,touchend之后系统才会判断是否要触发点击(click)事件;如果当前触发的是touchmove事件则不再触发点击(click)事件。

常用对象属性
  • clientX/clientY          // 触摸点相对于浏览器窗口位置
  • pageX/pageY           // 触摸点相对于页面的位置
  • screenX/screenY      // 触摸点相对于屏幕的位置


例子:
document.addEventListenter(‘touchstart’, function(event){
     console.log(event.touches[0].pageX);
},false);

复杂手势事件(Gesture Events)

前面讲的多是单根手指在屏幕上的操作手势,接下来处理一些复杂的手势。

场景:两根手指放在屏幕上并移动。
事件执行顺序:
  • 第一根手指落在屏幕上时只触发touchstart,除此之外什么都不发生;
  • 第二根手指落在屏幕上时触发gesture,并触发第二根手指的touchstart;
  • 由于两根手指落在屏幕上,此时触发 gesturechange ;
  • 移动手指时,持续触发 gesturechange,此时并不触发touchmove ;
  • 第二根手指提起,触发 gestureend,不再触发 gesturechange,并触发第二根手指的touchend;
  • 触发touchstart;当两根或多根手指在屏幕上提起一根时会刷新一次全局,所以此处触发第一根手指的touchstart;
  • 提起第一根手指,触发touchend;
2734240098.png


各平台系统对手势事件的模拟和封装不一,以下是IPhone/Android两大系统Webkit内核浏览器支持情况,Android貌似不是很理想哈,IOS下还是比较流畅的。
系统
gesturestart
gesturechange
gestureend
iOS
Y
Y
Y
Android(2.x)
N
N
N

常用事件绑定
  • gesturestart          // 当两根或两根以上手指放在屏幕时触发
  • gesturechange      // 两根或两根以上手指落在屏幕上触发,移动、旋转、分开、闭合手指时持续触发
  • gestureend           // 当屏幕上少于两根手指时触发


例子:
document.addEventListenter(‘gesturestart’, function(event){
     console.log(‘gesture start.’);
},false);

常用对象属性
  • rotation               // 旋转
  • scale                   // 缩放


例子:
document.addEventListenter(‘gesturechange’, function(event){
     console.log(‘scale:’ + event.scale);
     console.log(‘rotation:’ + event.rotation);
},false);

转自:http://eyson.cn/v/5.html

您需要登录后才可以回帖 登录 | 注册加入  

本版积分规则

Archiver|手机版|小黑屋|Discuz!扩展中心 ( 浙ICP备14042422号-1 )|网站地图QQ机器人

GMT+8, 2024-3-29 19:21 , Processed in 0.419804 second(s), 13 queries , Gzip On, Redis On.

Powered by Discuz! X3.5

© 2001-2024 Discuz! Team.

快速回复 返回顶部 返回列表