移动前端学习笔记（2）——移动端点击（touch、click、tap、fastclick）

最新推荐文章于 2024-08-17 15:12:25 发布

想成为大佬的鸭子

最新推荐文章于 2024-08-17 15:12:25 发布

阅读量3.1k

点赞数

分类专栏：移动端文章标签：移动前端 zepto fastclick

本文链接：https://blog.csdn.net/weixin_41309331/article/details/98476467

版权

本文介绍了移动前端中常见的点击事件，包括touch事件、click事件的300ms延迟问题、tap事件的实现与需求，以及解决点透问题的fastclick库。通过实例展示了zepto的tap事件封装和fastclick的使用方法。

摘要由CSDN通过智能技术生成

一、移动端touch事件

（1）主要事件：

移动端的touch事件（触屏事件）是针对移动web开发的，PC端不支持。它有以下三个主要事件：

touchstart	手指触摸屏幕时触发
touchmove	手指在屏幕上移动时持续触发
touchend	手指离开屏幕时触发

（2）touchEvent：

touchEvent（事件元参数）重点关注以下对象：

touches	位于屏幕上的所有手指触摸点列表，是一个数组
targetTouches	位于当前元素上的所有手指的列表，是一个数组（常用）
changedTouches	当前屏幕上变换的手指对象——从无到有，从有到无，即touchstart 时包含刚与屏幕接触的对象，touchend 时包含离开触摸屏的对象
target	获取当前触摸的元素

（3）重要属性：

clientX/Y	手指的触摸点相对于当前视口的坐标距离
pageX/Y	手指的触摸点相对于页面内容的坐标距离（含滚动）
screenX/Y	手指的触摸点相对于屏幕左上角的坐标距离

二、移动端click事件

在PC端，我们用click事件来实现点击。实际上，移动端也是支持click事件的，但是click事件在移动端会有延时（不同设备延迟不同，我们经常说是延时300ms），即从点击屏幕上的元素到触发元素的click事件，移动浏览器会有大约 300 毫秒的等待时间。因为移动浏览器想要看看用户是否会进行双击操作（double tap）。

我们可以简单验证一下，验证思路是为一个DOM元素先后添加多个事件——mousedown、click、mouseup、touchstart、touchend。查看打印结果的先后顺序及时间差：

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title></title>
	<style>
		body{
			padding: 0;
			margin: 0;
			text-align: center;
			background-color: aliceblue;
		}
		.result{
			width: 100px;
			height: 100px;
			text-align: center;
			line-height: 100px;
			margin: 100px auto 0;
			border: 1px solid #ccc;
		}
	</style>
</head>
<body>
	<div class="result">
		给我点下去
	</div>
	<