移动端300ms特殊处理
作者:互联网
移动端的特殊处理
300ms延迟的解决方法
- 300 毫秒延迟的主要原因是解决双击缩放(double tap to zoom)。双击缩放,顾名思义,即用手指在屏幕上快速点击两次,iOS 自带的 Safari 浏览器会将网页缩放至原始比例。
1.fastclick
- 解决移动设备上的浏览器默认会在用户点击屏幕大约延迟300毫秒后才会触发点击事件,这是为了检查用户是否在做双击。
- fastclick.js的原理是:FastClick的实现原理是在检测到touchend事件的时候,会通过DOM自定义事件立即出发模拟一个click事件,并把浏览器在300ms之后真正的click事件阻止掉。
使用方法
1. 安装:
命令行:npm install fastclick
CDN:<script crossorigin="anonymous" integrity="sha384-qSrEYLMHSuUya7HioxgwmVKxoqyVbT2Xmu87cJyVwFm1oq4M6Tz5lcdiFrOrS93l" src="https://lib.baomitu.com/fastclick/1.0.6/fastclick.min.js"></script>
2.使用fastclick
if ('addEventListener' in document) {
document.addEventListener('DOMContentLoaded', function() {
FastClick.attach(document.body);
}, false);
}
2.meta标签
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
3. touch-action
/* E11+浏览器设置了css的属性touch-action: manipulation,它会在某些标签(a,button等)禁止双击事件 */
*{touch-action: manipulation}
标签:fastclick,浏览器,缩放,300ms,特殊,touch,移动,双击 来源: https://www.cnblogs.com/zhaoxinran997/p/12404863.html