测试touch事件
进入触屏时代意味一切要对触屏友好。首先要搞清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