html5构建触屏网站之touch事件介绍


Posted in HTML / CSS onJanuary 07, 2013

前言
一个触屏网站到底和传统的pc端网站有什么区别呢,交互方式的改变首当其冲。例如我们常用的click事件,在触屏设备下是如此无力。
手机上的大部分交互都是通过touch来实现的,于是,对于触屏的交互式网站,触摸事件是相当重要的。
Apple在iOS 2.0中引入了触摸事件API,Android正迎头赶上这一事实标准,缩小差距。最近一个W3C工作组正合力制定这一触摸事件规范。

规范
这里我们介绍几种普及得比较好的触摸事件,你可以在绝大多数现代浏览器中来测试这一事件(必须是触屏设备哦):
touchstart:触摸开始的时候触发
touchmove:手指在屏幕上滑动的时候触发
touchend:触摸结束的时候触发
而每个触摸事件都包括了三个触摸列表,每个列表里包含了对应的一系列触摸点(用来实现多点触控):
touches:当前位于屏幕上的所有手指的列表。
targetTouches:位于当前DOM元素上手指的列表。
changedTouches:涉及当前事件手指的列表。
每个触摸点由包含了如下触摸信息(常用):
identifier:一个数值,唯一标识触摸会话(touch session)中的当前手指。一般为从0开始的流水号(android4.1,uc)
target:DOM元素,是动作所针对的目标。
pageX/pageX/clientX/clientY/screenX/screenY:一个数值,动作在屏幕上发生的位置(page包含滚动距离,client不包含滚动距离,screen则以屏幕为基准)。 
radiusX/radiusY/rotationAngle:画出大约相当于手指形状的椭圆形,分别为椭圆形的两个半径和旋转角度。初步测试浏览器不支持,好在功能不常用,欢迎大家反馈。
有了这些信息,我们就可以依据这些事件信息为用户提供不同的反馈了。

下面,我将为大家展示一个小demo,用touchmove实现的单指拖动:

复制代码
代码如下:

/*单指拖动*/
var obj = document.getElementById('id');
obj.addEventListener('touchmove', function(event) {
// 如果这个元素的位置内只有一个手指的话
if (event.targetTouches.length == 1) {

event.preventDefault();// 阻止浏览器默认事件,重要
var touch = event.targetTouches[0];
// 把元素放在手指所在的位置
obj.style.left = touch.pageX-50 + 'px';
obj.style.top = touch.pageY-50 + 'px';
}
}, false);


关于a标签四个伪类在触屏设备中的小技巧
我们都知道a标签的四个伪类link,visited,active,hover是专为click事件设计的,所以在触屏网站中尽量不要使用它们。经测试大部分也是不可用的。但是这里有一个关于hover的小技巧,当你点击过一个按钮之后,这个按钮就会一直处于hover的状态,此时你基于这个伪类所设置的css也是起作用的,直到你用手指点击另外一个按钮,hover状态就会转移到另一个按钮。利用这一点,我们可以做出一些小效果。此技巧在大多数浏览器中还是可用的。

理想很丰满,现实很骨感
虽然w3c为多点触控做好了准备,遗憾的是鲜有浏览器支持多点触控的特性,尤其是android平台上的浏览器,也就让上文介绍的手指列表变为了空谈,捕获两个触摸点会直接导致触摸失效!好在ios设备自带的safari浏览器能够支持这一特性,让我们对未来充满希望。毕竟,我们被鼠标的单点操作禁锢了太久,多指操作一个网站是多么令人兴奋!

HTML / CSS 相关文章推荐
CSS中简写属性要注意TRouBLe的顺序问题(避免踩坑)
Mar 09 HTML / CSS
CSS3 开发工具收集
Apr 17 HTML / CSS
CSS类名支持中文命名的示例
Apr 04 HTML / CSS
一款利用纯css3实现的win8加载动画的实例分析
Dec 11 HTML / CSS
纯CSS3实现扇形动画菜单(简化版)实例源码
Jan 17 HTML / CSS
2分钟教你实现环形/扇形菜单(基础版)
Jan 15 HTML / CSS
纯CSS3实现运行时钟的示例代码
Jan 25 HTML / CSS
利用HTML5 Canvas API绘制矩形的超级攻略
Mar 21 HTML / CSS
使用HTML5 Canvas绘制圆角矩形及相关的一些应用举例
Mar 22 HTML / CSS
video下autoplay属性无效的解决方法(添加muted属性)
May 19 HTML / CSS
AmazeUI 导航条的实现示例
Aug 14 HTML / CSS
CSS 新特性 contain控制页面的重绘与重排问题
Apr 30 HTML / CSS
html5构建触屏网站之网站尺寸探讨
Jan 07 #HTML / CSS
使用css创建三角形 使用CSS3创建3d四面体原理及代码(html5实践)
Jan 06 #HTML / CSS
html5中canvas学习笔记2-判断浏览器是否支持canvas
Jan 06 #HTML / CSS
html5中canvas学习笔记1-画板的尺寸与实际显示尺寸
Jan 06 #HTML / CSS
HTML5本地存储之Database Storage应用介绍
Jan 06 #HTML / CSS
HTML5本地存储之Web Storage应用介绍
Jan 06 #HTML / CSS
css3 transform 3d 使用css3创建动态3d立方体(html5实践)
Jan 06 #HTML / CSS
You might like
ThinkPHP 整合Bootstrap Ajax分页样式
2016/12/23 PHP
Yii2框架实现登陆添加验证码功能示例
2018/07/12 PHP
如何在标题栏显示框架内页面的标题
2007/02/03 Javascript
IE6背景图片不缓存问题解决方案及图片使用策略多个方法小结
2012/05/14 Javascript
一个基于jquery的文本框记数器
2012/09/19 Javascript
js中的push和join方法使用介绍
2013/10/08 Javascript
javascript history对象(历史记录)使用方法(实现浏览器前进后退)
2014/01/07 Javascript
深入探讨JavaScript、JQuery屏蔽网页鼠标右键菜单及禁止选择复制
2014/06/10 Javascript
JavaScript日期时间与时间戳的转换函数分享
2015/01/31 Javascript
JQuery遍历DOM节点的方法
2015/06/11 Javascript
JS表单数据验证的正则表达式(常用)
2017/02/18 Javascript
Angular 4根据组件名称动态创建出组件的方法教程
2017/11/01 Javascript
vue3.0 CLI - 2.4 - 新组件 Forms.vue 中学习表单
2018/09/14 Javascript
JQuery的加载和选择器用法简单示例
2019/05/13 jQuery
vue通过数据过滤实现表格合并
2020/11/30 Javascript
vue:el-input输入时限制输入的类型操作
2020/08/05 Javascript
vue移动端下拉刷新和上滑加载
2020/10/27 Javascript
Vuex实现简单购物车
2021/01/10 Vue.js
js canvas实现五子棋小游戏
2021/01/22 Javascript
浅谈python多线程和队列管理shell程序
2015/08/04 Python
python中安装Scrapy模块依赖包汇总
2017/07/02 Python
python进行TCP端口扫描的实现
2018/12/21 Python
用Python获取摄像头并实时控制人脸的实现示例
2019/07/11 Python
在django中图片上传的格式校验及大小方法
2019/07/28 Python
django中使用事务及接入支付宝支付功能
2019/09/15 Python
Django关于admin的使用技巧和知识点
2020/02/10 Python
Python自动化测试基础必备知识点总结
2021/02/07 Python
六道php面试题附答案
2014/06/05 面试题
中英文自我评价语句
2013/12/20 职场文书
消防安全汇报材料
2014/02/08 职场文书
工作失误检讨书(经典集锦版)
2014/10/17 职场文书
工作失误检讨书范文
2015/01/26 职场文书
2015年推广普通话演讲稿
2015/03/20 职场文书
学校运动会通讯稿
2015/07/18 职场文书
《认识年月日》教学反思
2016/02/19 职场文书
SQL Server使用导出向导功能
2022/04/08 SQL Server