移动端的主要问题是click会有200-300ms的延迟,主要原因是苹果手机在设计时,考虑到用户在浏览网页时需要放大,所以,在用户点击的300ms之后,才触发click,如果300ms之内还有click,就会进行放大缩小。
但是,问题是大部分时候放大、缩小时不需要的,有时开发者也会禁用他们,那么300ms的延迟就是性能上的损耗的,所以,如何解决这300ms的延迟? 在移动端,最容易想到的就是使用touchend来替代click,但是touchend是存在很大的问题的,因为touchend之前可能是touchstart、touchmove,最后才是touchend,具体情境可能是用户滑动页面时,不小心在一个按钮那里触发了touchend,这样就执行了,但是用户的本意不是如此。
1.tap事件
为了减少这300ms的延迟,tap事件被很多框架(如zepto)封装,来减少这延迟问题, tap事件不是原生的,所以是封装的,那么具体是如何实现的呢?
主要考虑到下面两点:
按住的事件不能超过延时时间,因为长时间可能就是浏览器的复制、粘贴等操作了。
不能在页面中移动,移动是不能触发tap事件的。
2.点透问题
如果我们在移动端所有的click都替换为了tap事件,还是会触发点透问题的,因为实质是: 在同一个z轴上,z-index不同的两个元素,上面的元素是一个绑定了tap事件的,下面是一个a标签,一旦tap触发,这个元素就会display: none,而从上面的tap可以看出,有touchstart、touchend,所以会300ms之后触发click事件,而z-index已经消失了,所以,触发了下面的a的click事件,注意: 我们认为a标签默认是绑定了click事件的。而这种现象不是我们所期待的。
解决方案: (1)使用fastclick。 (2)添加一个延迟。
转载至https://www.jianshu.com/p/09c3c8fbb957