20141124

标签：blog   http   io   ar   on   2014   art   log   html   

今天回顾了下移动前端的一些基本东西。

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/

20141124

标签：blog   http   io   ar   on   2014   art   log   html   

原文地址：http://www.cnblogs.com/samwu/p/4119539.html