這是ios移动端常见的兼容性问题
安装fastclick(顺便可以解决点击事件300毫秒延迟,点透问题等)
安裝
npm install fastclick --save
引用
import fastClick from 'fastclick';
fastClick.attach(document.body);
也可以作用在某个元素上
import fastClick from 'fastclick';
if(document.querySelector('#aaa')){
fastClick.attach(document.querySelector('#aaa'))
}
300ms延迟由来
07年,苹果公司发布首款Iphone前夕,遇到一个问题:当时的网站都是为大屏设计,手机屏幕太小无法正常浏览,于是苹果工程师做了一些约定解决此类问题。
这些约定当中,最为有名的是双击缩放(double tap to zoom),这是产生300ms延迟的根源。
用手指在屏幕上快速点击两次,iOS 自带的 Safari 浏览器会将网页缩放至原始比例。如果用户在 iOS Safari
里边点击了一个链接。由于用户可以进行双击缩放或者双击滚动的操作,当用户一次点击屏幕之后,浏览器并不能立刻判断用户是确实要打开这个链接,还是想要进行双击操作。因此,iOS
Safari 就等待 300 毫秒,以判断用户是否再次点击了屏幕。 鉴于iPhone的成功,其他移动浏览器都复制了 iPhone
Safari 浏览器的多数约定,包括双击缩放,几乎现在所有的移动端浏览器都有这个功能。 由此产生了300ms延迟问题。
————————————————
版权声明:本文为CSDN博主「程序不了猿」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/qq_37730829/article/details/109155753
点击穿透问题
说完移动端点击300ms延迟的问题,还不得不提一下移动端点击穿透的问题。可能有人会想,既然click点击有300ms的延迟,那对于触摸屏,我们直接监听touchstart事件不就好了吗?
使用touchstart去代替click事件有两个不好的地方。
第一:touchstart是手指触摸屏幕就触发,有时候用户只是想滑动屏幕,却触发了touchstart事件,这不是我们想要的结果;
第二:使用touchstart事件在某些场景下可能会出现点击穿透的现象。
什么是点击穿透?
假如页面上有两个元素A和B。B元素在A元素之上。我们在B元素的touchstart事件上注册了一个回调函数,该回调函数的作用是隐藏B元素。我们发现,当我们点击B元素,B元素被隐藏了,随后,A元素触发了click事件。
这是因为在移动端浏览器,事件执行的顺序是touchstart > touchend >
click。而click事件有300ms的延迟,当touchstart事件把B元素隐藏之后,隔了300ms,浏览器触发了click事件,但是此时B元素不见了,所以该事件被派发到了A元素身上。如果A元素是一个链接,那此时页面就会意外地跳转。