最近在忙的项目是Vue的混合开发,因交互相对复杂,所以也踩了很多坑。在此做一下总结。
1.tap事件的实际应用
在使用tap事件时,老生常谈的肯定是点透问题,大多情况下,在有滑屏交互的页面时,我们会在根节点阻止默认行为以解决事件点透的bug。
阻止默认行为有优点,但也会相对带来一些问题。
优点:
(1)解决事件点透
(2)解决IOS10+ safari 以及部分安卓浏览器 不在支持 viewport的最大缩放值和禁止缩放的问题
(3)解决IOS10+ safari下给body加overflow:hidden无效的问题
给元素加了 一个绝对定位,但是元素本身没有定位父级,元素如果超出了body的宽度,body 上的overflow对这个元素,不起效果
解决办法:增加一个div作为根节点,并且添加相对定位和overflow:hidden
缺点:
(1)禁止mouse事件执行(也可以说成是优点,具体情况具体分析)
(2)阻止浏览器的自带效果(左右滑动切换页面,滚动回弹等)
(3)阻止触发浏览器的滚动条
(4)阻止触发浏览器系统菜单
(5)阻止图片文字被选中
(6)阻止input的输入(在新开页面进行输入 eg.淘宝)
2.touchEvent相关变量
(1)touches 当前屏幕上的手指列表
(2)targetTouches 当前元素上的手指列表
(3)changedTouches 触发当前事件的手指列表
(4)clientX 和 clientY 手指相对于可视区的坐标
(5)pageX 和 pageY 手指相对于页面的坐标
3.tap事件封装要点
(1)touchend时确定最大距离,大于此距离无效
(2)确定从touchstart到touchend的时间间隔,大于此事件间隔无效
(3)严格意义上讲,touchmove时也应该有最大距离限制(手指在某元素上点击后绕了一大圈再回到当前元素不应触发tap事件)
(4)需要考虑tap事件对click的影响
未完待续。。。