29. 移动端click事件300ms延迟时间解决方案

目录

一、click延时解决方案

1. 禁用缩放

2、利用touch事件自己封装这个事件解决300ms延迟

3、利用fastclick插件

---

一、click延时解决方案

移动端click事件会有300ms的延时，是因为移动端屏幕双击（double tap to zoom）会缩放页面

解决方案：

1. 禁用缩放

浏览器禁用默认的双击缩放行为并且去掉300ms的点击延迟

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

2、利用touch事件自己封装这个事件解决300ms延迟

原理是：

• 当手指触摸屏幕时，记录当前的触摸时间

• 当手指离开屏幕时，用离开的时间减去触摸的时间

以下是代码：

3、利用fastclick插件

项目下载地址：https://github.com/ftlabs/fastclick

引入插件后，js中写入下面的代码

if ('addEventListener' in document) {

    document.addEventListener('DOMContentLoaded', function() {

        FastClick.attach(document.body);

    }, false);}