今天回顾了下移动前端的一些基本东西。
1.300ms延迟
原因:判断用户是否双击,这个判断时间。
解决方法:在touchend事件执行click事件,并且阻止300ms后的真正click事件触发。
参考:http://thx.github.io/mobile/300ms-click-delay/
http://www.cnblogs.com/lilyimage/p/3740668.html
2.点透
出现场景:
1.A/B两个层上下z轴重叠。
2.上层的A点击后消失或移开。(这一点很重要)
3.B元素本身有默认click事件(如a标签)或B绑定了click事件,就会触发B的click事件。
原因:300ms延迟。
解决方法:见参考
参考:http://www.it165.net/pro/html/201404/12322.html
3.事件顺序
事件发生默认顺序touchstart,touchmove,touchend,click
阻止事件默认顺序发生e.preventDeault();
事件冒泡顺序 由里到外
阻止事件冒泡,e.stopPropagation()
4.swipe,tap
swipe原理:记录touchstart坐标和touchend坐标,进行比较,得出swipe left或其它。
tap原理:记录touchstart时间和touchend时间,小于某个值,记为tap。
现存封装好的库有:
http://hammerjs.github.io/
http://touch.code.baidu.com/
时间: 2024-10-09 18:03:16