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实现鼠标悬停提示气泡效果
Feb 28 HTML / CSS
CSS3 中的@keyframes介绍
Sep 02 HTML / CSS
详解CSS3 rem(设置字体大小) 教程
Nov 21 HTML / CSS
10分钟理解CSS3 FlexBox弹性布局
Dec 20 HTML / CSS
详解如何使用CSS3中的结构伪类选择器和伪元素选择器
Jan 06 HTML / CSS
CSS3 旋转立方体问题详解
Jan 09 HTML / CSS
CSS3 filter(滤镜)实现网页灰色或者黑色模式的代码
Nov 30 HTML / CSS
HTML5 Canvas旋转动画的2个代码例子(一个旋转的太极图效果)
Apr 10 HTML / CSS
HTML5中的进度条progress元素简介及兼容性处理
Jun 02 HTML / CSS
HTML5地理定位_动力节点Java学院整理
Jul 12 HTML / CSS
Html5页面内使用JSON动画的实现
Jan 29 HTML / CSS
AmazeUI 网格的实现示例
Aug 13 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
php多次include后导致全局变量global失效的解决方法
2015/02/28 PHP
smarty学习笔记之常见代码段用法总结
2016/03/19 PHP
PHP实现QQ、微信和支付宝三合一收款码实例代码
2018/02/19 PHP
PHP getDocNamespaces()函数讲解
2019/02/03 PHP
jquery pagination插件实现无刷新分页代码
2009/10/13 Javascript
jquery实现图片等比例缩放以及max-width在ie中不兼容解决
2013/03/21 Javascript
js 编码转换 gb2312 和 utf8 互转的2种方法
2013/08/07 Javascript
Jquery实现由下向上展开效果的例子
2014/12/08 Javascript
js中函数声明与函数表达式
2015/06/03 Javascript
javascript控制层显示或隐藏的方法
2015/07/22 Javascript
详解微信小程序Radio选中样式切换
2017/07/06 Javascript
react开发教程之React 组件之间的通信方式
2017/08/12 Javascript
node.js-v6新版安装具体步骤(分享)
2017/09/06 Javascript
js实现扫雷小程序的示例代码
2017/09/27 Javascript
用react-redux实现react组件之间数据共享的方法
2018/06/08 Javascript
解决vue props 拿不到值的问题
2018/09/11 Javascript
vue vantUI实现文件(图片、文档、视频、音频)上传(多文件)
2019/10/15 Javascript
vue自定义组件(通过Vue.use()来使用)即install的用法说明
2020/08/11 Javascript
Python实现针对中文排序的方法
2017/05/09 Python
Python实现通讯录功能
2018/02/22 Python
python requests使用socks5的例子
2019/07/25 Python
Python flask框架端口失效解决方案
2020/06/04 Python
对python中list的五种查找方法说明
2020/07/13 Python
数以千计的折扣工业产品:ESE Direct
2018/05/20 全球购物
STAUD官方网站:洛杉矶独有的闲适风格
2019/04/11 全球购物
德国、奥地利和瑞士最大的旅行和度假门户网站:HolidayCheck
2019/11/14 全球购物
优秀英语专业毕业生求职信
2013/11/23 职场文书
《小猫刮胡子》教学反思
2014/02/21 职场文书
公证书样本
2014/04/10 职场文书
应届生自荐书
2014/06/23 职场文书
习近平在党的群众路线教育实践活动总结大会上的讲话全文
2014/10/25 职场文书
整改报告格式
2014/11/06 职场文书
2015年房地产个人工作总结
2015/05/26 职场文书
python实现腾讯滑块验证码识别
2021/04/27 Python
通过Qt连接OpenGauss数据库的详细教程
2021/06/23 PostgreSQL
漫画「处刑少女的生存之道」第3卷封面公开
2022/03/21 日漫