DOM系列之 click 延时解决方案

1、click延时原因

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

2、解决方案

2.1、方案一：禁用缩放

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

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

2.2、方案二：利用 touch 事件自己封装这个事件解决 300ms 延迟。

原理就是：

当我们手指触摸屏幕，记录当前触摸时间；
当我们手指离开屏幕，用离开的时间减去触摸的时间；
如果时间小于150ms，并且没有滑动过屏幕，那么我们就定义为点击；

//封装tap，解决click 300ms 延时
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 && Date.now() - startTime < 150) {
			// 如果手指触摸和离开时间小于150ms 算点击
			callback && callback(); // 执行回调函数
		}
		isMove = false; //  取反 重置
		startTime = 0;
	});
}
//调用
tap(div, function () {
	// 执行代码
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

2.3、方案三：利用插件 fastclick

fastclick 插件解决300ms 延迟。

DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<title>Documenttitle>
		<style>
			div {
				width: 50px;
				height: 50px;
				background-color: pink;
			}
		style>
		<script src="fastclick.js">script>
	head>

	<body>
		<div>div>
		<script>
			if ("addEventListener" in document) {
				document.addEventListener(
					"DOMContentLoaded",
					function () {
						FastClick.attach(document.body);
					},
					false
				);
			}
			var div = document.querySelector("div");
			div.addEventListener("click", function () {
				alert(11);
			});
		script>
	body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

后记

如果你感觉文章不咋地//(ㄒoㄒ)//，就在评论处留言，作者继续改进；o_O???
如果你觉得该文章有一点点用处，可以给作者点个赞；\\*^o^*//
如果你想要和作者一起进步，可以微信扫描二维码，关注前端老L；~~~///(^v^)\\\~~~
谢谢各位读者们啦(^_^)∠※！！！

在这里插入图片描述

相关阅读:
（附源码）计算机毕业设计SSM久宠宠物店管理系统
[NOI2022] 众数题解
系统安装技能测试
网络舆情监测制度与措施
opencv 训练
Set集合
5.点云法向量的计算(代码)
Java HashSet详解
WPF性能优化：形状(Shape)、几何图形(Geometry)和图画(Drawing)的使用
加载用户数据至用户维度表

原文地址：https://blog.csdn.net/weixin_62277266/article/details/126093590