指尖下的js —— 多触式web前端开发之三:处理复杂手势(转)
这篇文章着重介绍多触式设备上特有的gesture event(android和iOS对这个事件的封装大同小异)。这个
事件是对touch event的更高层的封装,和touch一样,它同样包括gesturestart,gesturechange,
gestureend三个事件回调:
gesturestart // 当有两根或多根手指放到屏幕上的时候触发 gesturechange // 当有两根或多根手指在屏幕上,并且有手指移动的时候触发 gestureend // 当倒数第二根手指提起的时候触发,结束gesture |
事件处理函数中会得到一个GestureEvent类型的参数,它包含了手指的scale(两根移动过程中分开的比例
)信息和rotation(两根手指间连线转动的角度)信息。
当两根或以上的手指在屏幕上活动的时候,我们可以做出一些较为复杂的手势。这将涉及到普通的mouse事
件,touch事件和gesture事件,情况比较复杂。touch已经在第一篇文章里详细介绍,这里就简单带过。
我们还是先看看当分别将两根手指放到屏幕上的时候,会触发哪些事件吧:
1、第一根手指放下,触发touchstart,除此之外什么都不会发生(请参照第二篇文章,手指提起才会触发
mouse的各事件)
2、第二根手指放下,触发gesturestart
3、触发第二根手指的touchstart
4、立即触发gesturechange
5、手指移动,持续触发gesturechange,就像鼠标在屏幕上移动的时候不停触发mousemove一样
6、第二根手指提起,触发gestureend,以后将不会再触发gesturechange
7、触发第二根手指的touchend
8、触发touchstart!注意,和第一篇文章里介绍的一样,多根手指在屏幕上,提起一根,会刷新一次全局
touch!重新触发第一根手指的touchstart,这点和苹果官方网站上介绍的不同。
9、提起第一根手指,触发touchend
Gesture事件的处理和Touch类似,我们一般会在gesturechange的时候利用GestureEvent对象中的信息来
做一些事情:
var angle = event.rotation; var scale = event.scale; |
这样能够取得scale和rotation信息,然后我们可以:
e.target.style.webkitTransform = 'scale(' + e.scale + startScale + ') rotate(' + e.rotation + startRotation + 'deg)' ; |
这段代码能让element随着你的两根手指的运动而转动、伸展。以下是一段测试代码,请用
ipad/iphone/android打开: http://wanglingshu.com/wp-content/uploads/ios-gesture.html
还有一件要说明的事情是,对于复杂手势,是否会触发某些鼠标事件?确实有,不过我只找到了一个。不管
你的两根手指在屏幕上伸缩还是转动,都不会有任何鼠标事件触发,但当你的两根手指同时朝上或者朝下移动
的时候,则会触发某些事件。请看下图:
两根手指同时向上或向下滚动,如果target element是一个scrollable element(也就是绑定了mousewheel的
element)的话,将会触发mousewheel事件。如果不是scrollable element,则当手指停止移动的时候,会触
发onscoll。这里请和第二篇文章的body scroll区别一下,如果你要滚动body,只需要一根手指轻轻拂动屏幕
,但是你要滚动一个内部div或者iframe,则需要动用两根手指。 这也是多触式设备一个不太方便的地方。而对于我们开发者来说,这种不方便被放大了。。。因为从用户体
验角度来说,要求用户使用两根手指滚动一个内部element显然是不合适的,而要实现像滚动body一样用一根
手指优雅地滚动,我们必须利用touchevent,在它的回调函数中用代码来实现scroll。这里介绍一个段很不错的
多触式滚动组件:iscroll-4
http://cubiq.org/scrolling-div-on-iphone-ipod-touch
用起来很简单,new一个iScroll对象,传入需要滚动的inner element作为参数就行了。
指尖下的js —— 多触式web前端开发之三:处理复杂手势(转)的更多相关文章
- 指尖下的js ——多触式web前端开发之一:对于Touch的处理
指尖下的js ——多触式web前端开发之一:对于Touch的处理 水果公司的那些small and cute的设备给我们提供了前所未有的用户体验.当用户在iphone和ipad上运指如飞的时候,那些使 ...
- 指尖下的js ——多触式web前端开发之二:处理简单手势(转)
这篇文章将描述多触式网页开发中对手势(Gesture)事件的处理. 水果设备中的Gesture,广义的说包括手指点击(click),轻拂(flick),双击(double-click),两只手 ...
- 植入式Web前端开发方法
上一篇,我讲述了植入式Web前端开发的基本情况,本篇就来探究其开发方法.以下假定CMS只能植入前端代码,并且需求规模是任意大小的. 代码形式 HTML代码是直接植入的毫无疑问,但除非植入的代码非常简短 ...
- 植入式Web前端开发
在博客园.凡科建站和其他的一些CMS系统中,提供有允许管理者向网页中插入自定义HTML代码的功能,我将其称之为"植入式"的Web前端代码. 因为CSS和JavaScript可以直接 ...
- 原生JS实现tab切换--web前端开发
tab切换非常常见,应用非常广泛,比较实用,一般来说是一个网站必不可少的一个效果.例如:https://123.sogou.com/中的一个tab部分: 1.案例源代码 <!DOCTYPE ht ...
- 1+X Web前端开发(中级)理论考试样题(附答案)
传送门 教育部:职业教育将启动"1+X"证书制度改革 职业教育改革1+X证书制度试点启动 1+X成绩/证书查询入口 一.单选题(每小题2分,共30小题,共 60 分) 1.在Boo ...
- 1+X Web前端开发(初级)理论考试样题(附答案)
传送门 教育部:职业教育将启动"1+X"证书制度改革 职业教育改革1+X证书制度试点启动 1+X成绩/证书查询入口 一.单选题(每题 2 分,共 60 分) 1.在 HTML 中, ...
- web前端开发分享-目录
1. web前端开发分享-css,js入门篇 2. web前端开发分享-css,js进阶篇 3. web前端开发分享-css,js提高篇 4. web前端开发分享-css,js工具篇 5. web前端 ...
- 【转】 web前端开发分享-目录
http://www.cnblogs.com/jikey/p/3613082.html 1. web前端开发分享-css,js入门篇 2. web前端开发分享-css,js进阶篇 3. web前端开发 ...
随机推荐
- Centos下修改hostname
之前安装Centos时候,没有怎么注意,将自己的名字设置为hostname,总感觉好别扭,很不习惯,如是就想把hostname改一下,用到hostname命令. 首先用hostname命令查看当前的主 ...
- Android版-微信APP支付
首发地址: Android版-微信APP支付 欢迎留言.转发 微信极速开发系列文章(微信支付.授权获取用户信息等):点击这里 目录 1.注册账号.开发者认证 2.添加应用 3.申请微信支付 4.技术开 ...
- nova network工作原理及配置
1. nova network简介 网络管理和配置是云计算中一项非常重要的功能.nova自带的nova-network实现了一些基本的网络模型,允许虚拟机之间的相互通信及虚拟机对internet的访问 ...
- ActiveMQ面试专题
https://blog.csdn.net/belvine/article/details/79399798
- 转:nginx基础概念(keepalive、pipe)
keapalive 当然,在nginx中,对于http1.0与http1.1也是支持长连接的.什么是长连接呢?我们知道,http请求是基于TCP协议之上的,那么,当客户端在发起请求前,需要先与服务端建 ...
- springboot 注解版案例
1.dao层 /** * 查询列表 * @param dataRequest * @return */ @SelectProvider(type = CuiShouSqlProvider.class, ...
- Linux多线程同步之相互排斥量和条件变量
1. 什么是相互排斥量 相互排斥量从本质上说是一把锁,在訪问共享资源前对相互排斥量进行加锁,在訪问完毕后释放相互排斥量上的锁. 对相互排斥量进行加锁以后,不论什么其它试图再次对相互排斥量加锁的线程将会 ...
- Win10下安装Ubuntu16.04虚拟机并搭建TensorFlow1.3环境
本文具体参考资料链接 1.VMware下载安装 百度输入VMware搜索,出现如下界面,点击下载: 此处安装步骤可以网上搜索,也可不用搜索,直接按照按照提示一步一步确认即可完成. 2.Ubuntu16 ...
- String的一些方法试探
package countio; import java.io.BufferedReader; import java.io.File; import java.io.FileReader; impo ...
- 元素高度、宽度获取 style currentStyle getComputedStyle getBoundingClientRect
1.示例代码 (1)html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...