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);}

猜你喜欢

转载自blog.csdn.net/Mr_LiuP/article/details/123225003