移动端click事件延迟和发生点透

一、点透出现的场景

1.A/B两个层上下z轴重叠。

2.上层的A点击后消失或移开。(这一点很重要)

3.B元素本身有默认click事件(如a标签) 或 B绑定了click事件。

在以上情况下,点击A/B重叠的部分,就会出现点透的现象。

二、为什么会出现点透

click延迟,延迟,还是延迟。

在移动端不使用click而用touch事件代替触摸是因为click事件有着明显的延迟,具体touchstart与click的区别如下:
1.touchstart:在这个DOM(或冒泡到这个DOM)上手指触摸开始即能立即触发
2.click:在这个DOM(或冒泡到这个DOM)上手指触摸开始,且手指未曾在屏幕上移动(某些浏览器允许移动一个非常小的位移值),且在这个在这个dom上手指离开屏幕,且触摸和离开屏幕之间的间隔时间较短(某些浏览器不检测间隔时间,也会触发click)才能触发

也就是说,事件的触发时间按由早到晚排列为:touchstart 早于 touchend 早于 click。亦即click的触发是有延迟的,这个时间大概在300ms左右。移动浏览器为什么会设置300毫秒的等待时间呢?这与双击缩放的方案有关。平时我们有可能已经注意到了,双击缩放,即用手指在屏幕上快速点击两次,可以看到内容或者图片放大,再次双击,浏览器会将网页缩放至原始比例。
浏览器捕获第一次单击后,会先等待一段时间,如果在这段时间区间里用户未进行下一次点击,则浏览器会做单击事件的处理。如果这段时间里用户进行了第二次单击操作,则浏览器会做双击事件处理。这段时间就是上面提到的300毫秒延迟。

由于我们在touchstart阶段就已经隐藏了罩层A,当click被触发时候,能够被点击的元素则是其下的B元素,根据click事件的触发规则:
只有在被触发时,当前有click事件的元素显示,且在面朝用户的最前端时,才触发click事件。

由于B绑定了click事件(或者B本身默认存在click事件),所以B的click事件被触发,产生了点透的情况。

二、解决方案

1.对于B元素本身没有默认click事件的情况(无a标签等),应统一使用touch事件,统一代码风格,并且由于click事件在移动端的延迟要大很多,不利于用户体验,所以关于触摸事件应尽量使用touch相关事件。

2.对于B元素本身存在默认click事件的情况,应及时取消A元素的默认点击事件,从而阻止click事件的产生。即应在上例的 handle函数中添加 代码如下:
if(eve == "touchsend") e.preventDefault();

3.对于遮盖浮层,由于遮盖浮层的点击即使有小延迟也是没有关系的,反而会有疑似更好的用户体验,所以这种情况,可以针对遮盖浮层自己采用click事件,这样就不会出现点透问题。

四、现有解决方案框架(库)

  1. 众所周知,zepto的tap事件是有点透问题的,但是最新版的zepto已经修复了这个问题。

  2. 在zepto修复问题之前,有fastclick、hammer等通用库可以使用。
    FastClick 是 FT Labs 专门为解决移动端浏览器 300 毫秒点击延迟问题所开发的一个轻量级的库。简而言之,FastClick 在检测到touchend事件的时候,会通过 DOM 自定义事件立即触发一个模拟click事件,并把浏览器在 300 毫秒之后真正触发的click事件阻止掉。使用方法如下。
    第一步:在页面中引入fastclick.js文件。

    第二步:在js文件中添加以下代码
    在 window load 事件之后,在body上调用FastClick.attach()即可。

     window.addEventListener(function(){   
         FastClick.attach( document.body );  
     },false );  

如果你项目使用了JQuery,就将上面的代码改写成:

     $(function() {    
         FastClick.attach(document.body);    
    });  

3.静止缩放
<meta name="viewport" content="width=device-width user-scalable= 'no'">
使用这个方法必须完全禁用缩放来达到目的,虽然大部分移动端能解决这个延迟问题,但是部分苹果手机还是不行。

推荐阅读更多精彩内容