移动端300ms延迟解决方案

移动端300ms延迟解决方案

产生300ms延迟的原因

个人理解浏览器是没有所谓的双击事件的,双击事件的本质其实是判断在300ms内是否产生了两次单机事件,故有300ms的延迟产生

解决300ms延迟的方案

1.禁止双击缩放

加入meta:user-scalable=no

<meta name="viewport" content="user-scalable=no">

2.使用插件fastclick.js

• JavaScript中使用

//先在script标签中引入fastclick.js

if ('addEventListener' in document) {
	document.addEventListener('DOMContentLoaded', function() {
		FastClick.attach(document.body);
	}, false);
}

• Vue中使用

//先执行安装fastclick的命令 npm install fastclick -S,再在main主文件使用

import FastClick from 'fastclick'

FastClick.attach(document.body);　

• Jquery 方式使用

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

• CommonJS 方式使用

var attachFastClick = require('fastclick');
attachFastClick(document.body);

拓展:touch事件与穿透问题

当touch事件触发时,由于300ms的延迟会导致touch事件穿透使底层事件触发

解决方案:

1.禁用touch的默认行为

e.preventDefault();

2.使用fastclick.js 插件