![[看]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_97.39cdc9f.png)
子非鱼丶
FE
|
WPS
热爱技术，保持锻炼
获得徽章 0
- 评论75
- 在移动端 click 有 300ms 延迟，是safari为了判断是否是双击事件而设计，浏览器要知道你是不是要双击操作以判断是否进行缩放
方案一: 禁用缩放
<meta name="viewport" content="user-scalable=no">
<meta name="viewport" content="initial-scale=1,maximum-scale=1">
缺点： 使得双指手势缩放也无效了
方案二: 更改浏览器视口宽度为设备宽度
如果设置了下述meta标签，那浏览器就可以认为该网站已经对移动端做过了适配和优化，就无需双击缩放操作了。
<meta name="viewport" content="width=device-width">
方案三：使用css属性touch-action
这个属性指定了相应元素上能够触发的用户代理（也就是浏览器）的默认行为。将属性值设为none，则不触发浏览器的默认行为。
缺点：支持程度低
方案四：模拟click事件
根据浏览器事件触发顺序：
touchstart --> touchmove --> touchend --> mouseover(有的浏览器没有实现) --> mousemove -->mousedown --> mouseup --> click
可以通过监测touchend事件，阻止原生click事件，模拟click事件并发出。展开533
github.com