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 相关文章推荐
CSS3系列之3D制作方法案例
Aug 14 HTML / CSS
纯CSS3实现表单验证效果(非常不错)
Jan 18 HTML / CSS
利用CSS3实现折角效果实例源码
Sep 28 HTML / CSS
结合 CSS3 transition transform 实现简单的跑马灯效果的示例
Feb 07 HTML / CSS
css和css3弹性盒模型实现元素宽度(高度)自适应
May 15 HTML / CSS
关于 HTML5 的七个传说小结
Apr 12 HTML / CSS
HTML5 Canvas的常用线条属性值总结
Mar 17 HTML / CSS
CSS实现fullpage.js全屏滚动效果的示例代码
Mar 24 HTML / CSS
简单介绍 http请求响应参数、无连接无状态、MIME、状态码、端口、telnet、curl
Mar 31 HTML / CSS
background-position百分比原理详解
May 08 HTML / CSS
详解使用 CSS prefers-* 规范提升网站的可访问性与健壮性
May 25 HTML / CSS
CSS list-style-type属性使用方法
May 21 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
一个更简单的无限级分类菜单代码
2007/01/16 PHP
PHP编程开发怎么提高编程效率 提高PHP编程技术
2015/11/09 PHP
将PHP程序中返回的JSON格式数据用gzip压缩输出的方法
2016/03/03 PHP
AJAX PHP无刷新form表单提交的简单实现(推荐)
2016/09/09 PHP
PHP面向对象继承用法详解(优化与减少代码重复)
2016/12/02 PHP
PHP+Mysql+Ajax实现淘宝客服或阿里旺旺聊天功能(前台页面)
2017/06/16 PHP
小型js框架veryide.librar源代码
2009/03/05 Javascript
一个小例子解释如何来阻止Jquery事件冒泡
2014/07/17 Javascript
JavaScript使用Replace进行字符串替换的方法
2015/04/14 Javascript
javascript中 try catch用法
2015/08/16 Javascript
JS实现可展开折叠层的鼠标拖曳效果
2015/10/09 Javascript
js实现微信分享代码
2020/10/11 Javascript
js解决movebox移动问题
2016/03/29 Javascript
JavaScript图像延迟加载库Echo.js
2016/04/05 Javascript
jQuery hover事件简单实现同时绑定2个方法
2016/06/07 Javascript
angular+ionic返回上一页并刷新页面
2017/08/08 Javascript
angularJS开发注意事项
2018/05/26 Javascript
Vue.js 中 axios 跨域访问错误问题及解决方法
2018/11/21 Javascript
如何使用puppet替换文件中的string
2018/12/06 Javascript
javascript面向对象三大特征之封装实例详解
2019/07/24 Javascript
关于vue3.0中的this.$router.replace({ path: '/'})刷新无效果问题
2020/01/16 Javascript
[01:34]2014DOTA2 TI预选赛预选赛 选手比赛房大揭秘!
2014/05/20 DOTA
[06:06]2018DOTA2亚洲邀请赛主赛事第四日战况回顾 全明星赛欢乐上演
2018/04/07 DOTA
解决新版Pycharm中Matplotlib图像不在弹出独立的显示窗口问题
2019/01/15 Python
python3在同一行内输入n个数并用列表保存的例子
2019/07/20 Python
python3.7 openpyxl 删除指定一列或者一行的代码
2019/10/08 Python
Python unittest单元测试框架及断言方法
2020/04/15 Python
python中sort sorted reverse reversed函数的区别说明
2020/05/11 Python
python实现126邮箱发送邮件
2020/05/20 Python
JACK & JONES瑞典官方网站:杰克琼斯欧式风格男装
2017/12/23 全球购物
新锐科技Java程序员面试题
2016/07/25 面试题
JAVA程序设计笔试题面试题一套
2015/07/28 面试题
寄语学生的话
2014/04/10 职场文书
2015年电厂工作总结范文
2015/05/13 职场文书
青年教师听课心得体会
2016/01/15 职场文书
竞选稿之小学班干部
2019/10/31 职场文书