http://www.cnblogs.com/shawn-xie/archive/2012/12/07/2805582.html

前言

一个触屏网站到底和传统的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浏览器能够支持这一特性,让我们对未来充满希望。毕竟,我们被鼠标的单点操作禁锢了太久,多指操作一个网站是多么令人兴奋!

http://uecdcn.diandian.com/post/2012-05-13/40030990613

http://www.cnblogs.com/sh_yao/archive/2013/09/11/3314921.html

Touch事件的更多相关文章

  1. UC浏览器中touch事件的异常记录

    以前也在UC上面栽过几个坑,不过都是页面显示方面的.上个周的时候,商品详情页重做,要添加个上拉显示详情的效果. 有两个条件需要判断: 1.是否到达底部: 2.到达底部之后拖动的y轴距离. 效果写完后, ...

  2. 移动端开发概览【webview和touch事件】

    作为一个前端,而且作为一个做移动端开发的前端,那意味着你要有三头六臂,跟iOS开发哥哥一起打酱油,跟Android开发哥哥一起修bug... Android vs Ios 我在webkit内核的chr ...

  3. 手持设备点击响应速度,鼠标事件与touch事件的那些事

    前言 现在一直在做移动端的开发,这次将单页应用的网页内嵌入了app,于是老大反映了一个问题:app应用点击响应慢!我开始不以为然,于是拿着网页版的试了试,好像确实有一定延迟,于是开始了研究,最后选择了 ...

  4. 第六课 touch事件

    1.移动端页面在PC上浏览时,限制宽度的方法: 2.移动端页面切换设备时自动刷新页面的方法: 3.touch事件 touchstart:当手指触摸屏幕时触发.通过addEventListener添加移 ...

  5. 原生js移动端touch事件实现上拉加载更多

    大家都知道jQuery里没有touch事件,所以在移动端使用原生js实现上拉加载效果还是很不错的,闲话不多说,代码如下: //获取要操作的元素 var objSection = document.ge ...

  6. js的touch事件的实际引用

    一开始做前端页面的时候,接触的也是js,但是随后便被简单高效的jquery吸引过去,并一直使用至今. 而js,则被我主观的认为底层技术而抛弃. 直到这几天工作需要,研究移动端页面的触屏滑动事件,搜索j ...

  7. H5中的touch事件

    touch中共有touchstart.touchmove和touchend三个事件: touchstart:触摸开始的时候触发 touchmove:手指在屏幕上滑动的时候触发 touchend:触摸结 ...

  8. javascript移动设备Web开发中对touch事件的封装实例

    在触屏设备上,一些比较基础的手势都需要通过对 touch 事件进行二次封装才能实现.zepto 是移动端上使用率比较高的一个类库,但是其 touch 模块模拟出来的一些事件存在一些兼容性问题,如 ta ...

  9. Android Touch事件传递机制 二:单纯的(伪生命周期)

    转载于:http://blog.csdn.net/yuanzeyao/article/details/38025165 在前一篇文章中,我主要讲解了Android源码中的Touch事件的传递过程,现在 ...

  10. Android Touch事件传递机制 一: OnTouch,OnItemClick(监听器),dispatchTouchEvent(伪生命周期)

      ViewGroup View  Activity dispatchTouchEvent 有 有 有 onInterceptTouchEvent 有 无 无 onTouchEvent 有 有 有 例 ...

随机推荐

  1. POJ_2488——骑士遍历棋盘,字典序走法

    Description Background The knight is getting bored of seeing the same black and white squares again ...

  2. 如何将Java Web项目部署到服务器上

    转自:(此处更详细)http://blog.csdn.net/gulu_gulu_jp/article/details/50994003 一.前言 前面我们已经尝过了在云服务器上部署代码的甜头了,现在 ...

  3. Raid1源代码分析--同步流程

    同步的大流程是先读,后写.所以是分两个阶段,sync_request完成第一个阶段,sync_request_write完成第二个阶段.第一个阶段由MD发起(md_do_sync),第二个阶段由守护进 ...

  4. windows server2012域服务器降级的方法

    最近在一个新的网络环境里建立windows域服务器,准备建立主.备两台域服务器.在一台新服务器上面安装了windows2012R2并配置了DC服务.域和林的级别设置为Windows2012R2级别.在 ...

  5. c# 可变性解析(协变和逆变)

    之所以会想写关于协变和逆变的知识点,主要是因为在泛型委托中提到了这个知识点. 1.什么是可变性 可变性是.NET4.0中的一个特性,可变形分为:协变性,逆变性,不可变性. 2.在.NET4.0出来之前 ...

  6. SEO名词_黒帽SEO

    一.什么是黒帽SEO 黑帽SEO是指通过一些操控和欺骗找寻搜索引擎漏洞的一些技术,让关键词排名在很短的时间获得非常好的排名的一项技术 二.黒帽SEO的危害 如果被搜索引擎识别网站采用的是黑帽SEO手段 ...

  7. Javascript:简单拖拽效果的实现

    核心代码: /* *完成一个拖拽事件由三大事件组成: *1:onmousedown:选择元素 *2:onmousemove:移动元素 *3:onmouseup:释放元素 */ function dra ...

  8. 关于退运美国转基因玉米含有MRI 162转基因成分的质疑

    6月30日,新华社刊出文章"我国退运125.2万吨进口美国转基因玉米",读后有感. 文章说:国家质检总局办公厅副主任陆春明30日介绍,截至今年6月16日,全国出入境检验检疫机构共在 ...

  9. Eclipse颜色主题插件-Eclipse Color Theme

    Eclipse颜色主题插件-Eclipse Color Theme 由于看烦了eclipse自带的的配色方案,自己动手配置又太麻烦,无意间在 http://eclipsecolorthemes.org ...

  10. Tomcat全攻略

    内容: 一:简单介绍 二:安装及配置 三:应用 四:综述 參考资料 关于作者 相关内容: TCP/IP 介绍 TCP/IP 介绍 !== End Related dW Content Area --& ...