博主所负责其中一个项目是web页面,在移动端上出现了事件穿透问题,开发介绍问题原因后,发觉是移动web一个知识点,值得记录一下。
移动浏览器提供一个特殊的功能:双击(double tap)放大
300ms的延迟就来自这里,用户触碰页面之后,需要等待一段时间来判断是不是双击(double tap)动作,而不是立即响应click(单击),等待的这段时间大约是300ms。
touchstart
、touchmove
、touchend
,却没有tap支持;touchstart
或者 touchend
当作tap来用,但存在一些问题,比如手指接触目标元素,按住不放,慢慢移出响应区域,会触发 touchstart
事件执行对应的事件处理器(本不应该触发),touchend
事件也存在类似的问题。touch
事件存在点击穿透的问题,因为click是在touch系列事件发生后大约300ms才触发,混用touch
和click
肯定会导致事件穿透。click
事件有300ms的延迟,会有响应慢/延迟的感觉,因此很多移动页面会使用touch/tap事件。用过zepto
或者kissy
等移动端js库的人肯定对tap
事件不陌生,我们做pc页面时候绑定click
,相应地手机页面就绑定tap
。但原生的touch事件本身是没有tap的,js库提供的tap事件都是模拟出来的。
zepto
中对tap事件处理:如果在touched响应250ms无操作后,则触发singletap。即事件触发顺序为:touch-tap-click。
点击穿透现象有3种:
a标签跳转默认是click事件触发
。原因同上。思路:
不要混用touch和click:touch之后300ms会触发click,只有touch或者只用click就自然不会存在问题。
吃掉/消费掉touch之后的click
依旧使用tap,只是在可能发生点击穿透的情形下做额外的处理,拿个东西来挡住、或者tap后延迟350ms再隐藏mask、pointer-events、在下面元素的事件处理器里做检测。
我们对事件响应速度要求不高,最后是通过延迟隐藏/关闭mask/弹窗解决的,简单可控哈。
参考:
如对本文有疑问, 点击进行留言回复!!
基于质谱的蛋白质鉴定,第3节:基于MALDI-MS肽指纹图谱的蛋白质质谱鉴定
HEVC代码学习:帧间预测——MVP过程中MV的获取、传递及存储
网友评论