测试touch事件

标签: Uncategorized | 发表时间:2012-11-20 16:24 | 作者:Kejun
出处:http://hikejun.com/blog

进入触屏时代意味一切要对触屏友好。首先要搞清touch事件。今天仅仅测试了ios6,其它版本包括android还不清楚差别有多大。看了PPK的touch兼容表(http://www.quirksmode.org/mobile/tableTouch.html),深感刚准备告别ie6,又迎来了一个新的混乱时代,苦逼的前端工程师们永远摆脱不了兼容的魔咒。

—————————————————————————

测试地址:http://jsbin.com/isuqaf/2/

在iOS上的测试结果:

一:发生在非可点击元素上:
1. 手指点击(tap),坐标不变:
touchstart
touchend
mouseover
mousemove

2. 手指在屏幕上滑动,坐标改变小:
touchstart
touchmove (多次)
touchend
mouseout (若前一次触发过mouseover)
mouseover (有时没有, 坐标改变很小时没有)
mousemove (有时没有)

3. 手指在屏幕上滑动,停留时间长一些:
touchstart
touchmove (多次)
touchend

二:发生在可点击元素上:
1. 链接若绑定touch事件,touch事件里操作dom(内容发生改变),不会触发click事件,链接也不会跳转
2. 包括父级的touch事件若改变页面内容,同样不会触发click事件
3. 不触发click的情况,解发顺序:
touchstart
touchend
mouseover
mousemove

三:window和模块都绑定事件:
1. window绑定scroll事件和touch事件,顺序:
page touchstart
page touchmove (多次)
page touchend
page scroll (手指水平移动,不触发scroll)

2. 滑过模块不会触发模块的touch事件

3. 在模块上滑动页面
touchstart
page touchstart
touchmove, page touchmove (交替触发)
touchend
page touchend
scroll (页面停止滚动时,触发一次,若手指水平移动,不触发scroll)

4. 页面滚动过程中,手指在模块区域内移动
touchstart
page touchstart
touchmove, page touchmove (交替触发)
touchend
page touchend
scroll (触发两次)

5. 页面在开始位置,向下拉并保持,再松开
同3,touchmove, page touchmove交替触发多次

四:阻止模块touchstart事件的默认行为(preventDefault),在模块内移动手指:
1. 页面滚动失效,事件顺序:
touchstart
page touchstart
touchmove, page touchmove (交替触发)
touchend
page touchend
只是没触发scroll

五:callout时会触发touchcancel,如长按链接之类

已知的BUG:

http://code.google.com/p/chromium/issues/detail?id=142187

PPK的touch兼容表:http://www.quirksmode.org/mobile/tableTouch.html
苹果官方文档:https://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html

相关 [测试 touch 事件] 推荐:

测试touch事件

- - Kejun's Blog
进入触屏时代意味一切要对触屏友好. 今天仅仅测试了ios6,其它版本包括android还不清楚差别有多大. 看了PPK的touch兼容表(http://www.quirksmode.org/mobile/tableTouch.html),深感刚准备告别ie6,又迎来了一个新的混乱时代,苦逼的前端工程师们永远摆脱不了兼容的魔咒.

使用phantom-limb 模拟Touch 事件

- - ITeye博客
下载 phantom-limb.js. 注意phantom-limb位置. // 在这里可以直接监听touch事件了. 测试结果在Canvas上可以正常写字,表示通过. 已有 0 人发表留言,猛击->> 这里<<-参与讨论. —软件人才免语言低担保 赴美带薪读研.

Android WebView Touch事件及相关问题处理

- - CSDN博客推荐文章
如有转载,请声明出处: 时之沙:  http://blog.csdn.net/t12x3456. 继上一篇  Android WebView常见问题及解决方案汇总 中归纳了一些处理webview的常见问题,这次要说的是webview中的touch事件:. 有时候在开发中,我们需要对webview加入触摸事件的处理,比如加入滑动效果或者类似于阅读中的翻页效果,这时候我们就需要重写webview中的onTouch方法:.

kindle touch简单说

- - GeoWHY
好吧,最右边的是kindle3,去年买的,后来送丫头,给她在国外看书用了. 最左边的是kindle4,小巴童鞋的,中间那个是我的,kindle touch. touch是99刀,托人从国外带回来,所以很便宜,630块而已,感觉上比kindle3小很多,盈盈可握,倒是蛮适合女孩子用的(领导你拿去用吧,把kindle3换给我就好).

超给力iPod touch魔术

- bbiy - cnBeta.COM
有魔术师日前在网络上表演了一段令人眼花缭乱的iPod魔术. 他用娴熟的手法把玩三台iPod touch,制造出了炫目的光影效果. 从原理上来看,这种魔术应当只是简单的通过视频播放完成,但时间的准确同步还是有相当的难度,效果也足够给力.

Amazon Kindle Touch 主站動手玩心得

- SotongDJ - Engadget 中文版
做為今天 Amazon 電子書閱讀器三連發的一份子,Kindle Touch 介於中間 -- 有紅外線觸控螢幕,但又不像 Kindle Fire 那樣是用 LCD 螢幕的,大體上是和最新的觸控螢幕 Nook 或 Sony PRS-T1 屬於同類型的產品. 少了實體鍵盤之後,Kindle Touch 比 Kindle 3 小了不少,同時觸控的反應也算是相當不錯,用來輸入文字並沒有什麼大問題.

将 iPod Touch 改造为“服务器”

- guoan - Gracecode.com
下面是 周末“闲着蛋疼”科技频道 为您报道. 介于国内目前残酷的网络环境,秉承发挥科学发展观、实现可持续发展的态度,不给国家负担,经过两个小时的艰苦奋斗,终于研发出具有世界领先水平、国际不靠谱产权的无网线、可放在口袋里即可搬离 IDC 的微型服务器. 说正题,周末将我的 iPod 版本升级,破解以后里面没有数据,于是折腾装了个 lighttpd 和 PHP,配合起来就可以跑个小型的 HTTP 服务器了.

Android 区别普通Touch方法和Scroll

- - ITeye博客
    今天想实现这个功能,但只是利用现有的onTouchEvent和GestureDetector感觉做起来有些纠结,原来好像也尝试过,最后搞的程序有点乱,不好维护,那么就利用一下Android程序员最大的优势——源码.     首先想到的ListView既支持点击又支持拖动,就去看源码,首先找的突破点就是:.

Sencha Touch 2 入门 Demo 之一:搭建 Sencha Touch 2 的运行环境

- - 博客园_首页
前段时间不才翻译了关于Sencha Touch 2 MVC架构的一系列文章,大家的认可让我备受鼓舞,也坚定了继续分享自己学习Sencha Touch(下文简称ST)过程和经验的决心. 在跟大家交流的过程中,发现很多入门者反映,学习ST最大的障碍有两个:1、官方文档跟进速度不够;2、官方sample集成程度较高,典型性不足.

Google+ 终于推出支持 iPod touch 和 iPad 的版本,但……

- Jack - 谷奥——探寻谷歌的奥秘
Google+ for iOS最初推出之时最大的问题居然是不支持iPod touch和iPad,这让广大同为谷粉的果粉很是不爽. 今天他们终于更新了Google+ for iOS应用到1.0.2.1966版本,主要更新:. 支持iPod touch和iPad. 但是当你在iPad上打开Google+之后却发现了上图那样的囧况,这……Google这是在搞笑吗.