更新时间:2023-09-27 来源:黑马程序员 浏览量:
在移动端使用click事件时会出现300ms左右的延时问题，其原因是浏览器需要判断用户的操作是单次点击还是双次点击。例如，在手机上浏览网页时，由于手机屏幕比较小，页面中可能会有一些文字看不清楚。为了看清楚文字，用户通常会快速双击屏幕放大页面查看内容。当用户第一次点击屏幕时，浏览器无法立刻判断用户的操作，浏览器会等待300ms。如果用户在300ms内再次点击了屏幕，浏览器就会认为是一个双次点击的操作，否则就会认为是一个单次点击操作。
随着移动端网页的流行与普及，用户对网页性能有了更高的要求，而在移动端使用click事件会出现延时，这会影响用户的体验。下面我们给出了3个解决方案，用来处理click事件出现300ms延时的问题，大家可以根据实际需求进行选择。
1.禁用缩放解决移动端click事件出现300ms的延时问题
设置浏览器禁用默认的双击缩放即可去掉300ms的点击延时，示例代码如下：
<meta name="viewport" content="user-scalable=no">上述代码中，使用user-scalable=no表明这个页面不可缩放，此时浏览器就会禁用双击缩放并且去掉300ms点击延时。但这个方案存在缺点，它完全禁用了双击缩放，当我们需要放大文字或者图片时无法满足需求。
2.封装touch事件解决移动端click 事件出现300 ms的延时问题
当浏览器允许用户缩放页面时，可以对touch事件进行封装，解决300ms延时问题，具体实现思路如下：
①当手指触摸屏幕时，记录当前触摸开始的时间。
②当手指离开屏幕时，用离开的时间减去触摸开始的时间，得到手指停留时间。
③如果手指停留时间小于150ms，并且没有滑动过屏幕，就定义为单次点击。
下面编写代码将touch事件手动封装成一个tap事件，解决300ms延时问题，示例代码如下：
JavaEE
鸿蒙应用开发
HTML&JS+前端
Python+大数据开发
人工智能开发
AI+设计
软件测试
新媒体+短视频
集成电路应用开发
AI+Linux云计算运维
//封装tap事件
function tap(obj,callback) {
var isMove=false;
//记录手指是否移动
var startTime=0; //记录触摸时的时间变量
obj.addEventListener('touchstart',function(e){
startTime=Date.now();
}): //记录触摸时间
});
obj.addEventListener('touchmove',function (e){
isMove=true; //查看手指是否有滑动（如果有，属于拖曳，不属于点击）
});
obj.addEventListener('touchend',function (e){
if(!isMove &6 (Date.now()-startTime)<150){
// 如果手指触摸和离开时间小于150ms，属于点击
callback && callback（）；//执行回调函数
}
isMove=false; // 取反
startTime=0;
});
}
// 调用
tap(div,function(){
//执行点击后的代码
});上述方案可以检测单个元素发生点击时的状态，解决移动端click事件出现300ms的延时问题。
3.使用FastClick 插件解决移动端click 事件出现300 ms的延时问题
FastClick 插件是由FT Labs(英国金融时报实验室)团队开发的JavaScript库，它简单易用，容易上手，解决了click事件在移动端触发时有大约300ms延时的问题。FastClick的实现原理是在检测到touchend事件时，通过DOM自定义事件立即触发click事件，并阻止浏览器在300 ms之后的click事件。
下面讲解如何使用FastClick 插件解决移动端click事件出现300 ms的延时问题，具体步骤如下。
(1)通过官网下载fastclick.js至本地，并在HTML页面中使用<script>标签引入fastclick.js文件，引入方式如下：、
<script src="fastclick.js"></script>
(2)通过JavaScript方式对Fastclick进行实例化，示例代码如下：
if('addEventListener'in document){
document.addEventListener ('DOMContentLoaded', function () {
FastClick.attach(document.body);
}, false);
}上述代码中，FastClick.attach()方法的参数可以是任意的DOM元素，在这里使用document.body表示将body元素中的所有子元素都绑定FastClick事件，解决移动端click。
(3)在HTML页面中，编写结构代码，示例代码如下：
<body> <div></div> </body>
(4)在<script>标签中的Fastclick实例化代码后，编写JavaScript代码，绑定click事件，示例代码如下：
var Odiv=document.querySelector('div');
Odiv.addEventListener('click', function(){
alert（'点击操作')；
});
.jpg)