当前位置： 首页 > news >正文

移动端事件300ms延迟解决

news 2025/9/4 18:42:20

         有移动端与PC端的项目开发，那么移动端和PC端开发上是存在差异的，比如 click 事件的300ms 延迟，即移动Web页面上的click事件响应都要慢上300ms，移动设备访问Web页面时往往需要 “双击” 或者 “捏开” 来放大页面看清页面的具体内容；这样做的原因是为了确定用户是“单机”还是“双击”，safari(macOS浏览器) 需要通过300ms的延迟来判断！关于 “300毫秒的延迟” 是一个默认的规范，首先先来了解这个300ms的延迟是怎么样的!

meta viewport 视口

        在开发移动端的时候会在head标签中去添加如下这段：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

        viewport视口，设置的宽度是设备的宽度，即网页的宽度是设备的宽度；对比一下：

 1 ）添加 viewport 视口 —— 按钮大小不变

 2 ）无 viewport 视口 —— 按钮大小变小

        可以看到无 viewport 视口按钮太小了，需要缩放后才能去触发，就需要300ms的延迟，当添加了 viewport 视口属性之后，浏览器也不会触发 “双击” 功能，那么对于300ms的延迟也就没有延迟的必要，所以在安卓上添加这样的一个 viewport 视口就可以解决了，也没有了300ms的延迟！那既然能解决？不就结束了吗？meta对于某些设备浏览存在一些兼容性问题的，除了用meta解决就没有别的方法了吗？先来 viewport 视口的设置去掉，来证实一下关于300ms延迟的存在！

         在移动端中，通过触摸屏幕来操作页面中的内容的，那么如何来模拟移动端呢？相信大家都已经知道了，可以通过浏览器来模拟移动端了！ 

         通过移动端浏览器提供与网页交互的事件来模拟；touchstart( 手指按下触发 )，touchmove( 手指滑动触发 )，touchend( 手指离开触发 )；

1 ）下面来使用原生JS来模拟对比一下移动端与PC端间是否存在延迟：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>Document</title>
</head>
<body><button ontouchstart="handleStart()" onclick="handleClick()">点击</button><script>function handleStart(){console.log("handleStart —— ",Date.now())}function handleClick(){console.log("handleClick —— ",Date.now())}</script>
</body>
</html>

2 ）测试一下三组结果：

         触摸handleStart的触发和点击事件handleClick的触发时间相差在300ms左右，这也证实了300ms的延迟是存在的，上面讲到这个viewport视口可以解决这个延迟，来继续测试一下：

3 ）viewport视口解决延迟：

 在head标签添加：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

         这个延迟在100ms左右浮动，而不添加是在300ms左右浮动，那么就有要问的不是说解决延迟吗？怎么还有延迟，可以自己测试一下这个添加后的延迟比不添加的延迟，速度显然要快很大，有时感觉可能感觉不到延迟；

        关于300ms的延迟操作显然是存在的，那么既然在移动端开发中 ontouchstart 的触发比 onclick 的触发要快，直接用 ontouchstart 触发不就好了吗？为什么还需要这个 onclick 来触发？这是什么原因？或者说为什么不能用 ontouchstart 来解决这个问题呢？

        假设使用 ontouchstart 来进行触发，当用户想滑动一下这个页面的时候，手指放在设备上的那一刻就会触发 ontouchstart ，本意只是想滑动一下这个页面查看，当轮播的时候，一触碰就会触发跳转，本意只是想滑动到下一页轮播页罢了，所以使用 ontouchstart 来代替 onclick 显然不合理，目的可能不是为了触发而是滑动页面；

        既然 meta viewport视口 可以解决但存在兼容性的问题怎么解决？下面就来讲解：

fastclick

        fastclcik 顾名思义快速点击，光听名字都能解决，太强了，那fastclick 是怎么来解决的？同样的也是使用touchstart等上面讲到的这些操作，怎么实现的呢？当你的手指按下会触发touchstart会记录手指的位置和时间戳，但你手指离开了触发touchend会记录手指的位置和时间戳以及位移，如果对比前后时间足够短，位移足够小则这是一次点击事件的触发而不是滑动页面；知道了这个解决方案能力够的可以自己封装，当然这里就用现成的了；

         当然可以看一下 fastclick这个库，来到官网地址：点击跳转 ，来到这个库之后可以看到官网中有这一段话；

         通过上面这段内容可以知道不是非得用，而是可以分情况来查看是否需要，下面来下载测试一下：下载 fastclick ，下载完成之后通过script标签引入：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"> <script type='application/javascript' src='./path/to/fastclick.js'></script><title>Document</title>
</head>
<body><button ontouchstart="handleStart()" onclick="handleClick()">点击</button><script>if ('addEventListener' in document) {document.addEventListener('DOMContentLoaded', function() {FastClick.attach(document.body);}, false);}function handleStart(){console.log("handleStart —— ",Date.now())}function handleClick(){console.log("handleClick —— ",Date.now())}</script>
</body>
</html>

        延迟在100ms左右时在可接受的范围之内，如果不用 fastclick 还能怎么解决？

touch-action:manipulation  

        在 css 中设置每个元素都禁用双击缩放功能；这个不需要引入任何内容，属于C3

        那么可以结合设置 meta viewport 解决视口问题，一般会采用这种方案；

        那么本篇就是关于开发移动端项目当中存在的300ms事件延迟的解决方案，可以通过meta viewport 、fastclick 第三方库、meta viewport + touch-action 这些解决的方法，可以根据实际的情况来完成这些内容！

相关文章：

移动端事件300ms延迟解决

有移动端与PC端的项目开发&#xff0c;那么移动端和PC端开发上是存在差异的&#xff0c;比如 click 事件的300ms 延迟&#xff0c;即移动Web页面上的click事件响应都要慢上300ms&#xff0c;移动设备访问Web页面时往往需要 “双击” 或者 “捏开” 来放大页面看清页面的具体内容…...

编程日记 2023/6/11 7:48:46

NRF52832的DFU

开发环境&#xff1a; Winsodw&#xff1a;10 nRF5_SDK&#xff1a;17.1.0 1 工具安装 1.1 gcc-arm-none-eabi Downloads | GNU Arm Embedded Toolchain Downloads – Arm Developer 下载“gcc-arm-none-eabi-10.3-2021.10-win32.exe”&#xff0c;接提示安装。注意安装完…...

编程日记 2023/6/11 7:43:45

开源WebRTC库放大器模式在采集桌面图像时遇到的DPI缩放与内存泄漏问题排查

目录 1、在非100%的显示比例下放大器采集到的桌面图像不全问题 1.1、通过manifest文件禁止系统对软件进行缩放 1.2、调用SetThreadDpiAwarenessContext函数&#xff0c;禁止系统对目标线程中的窗口进行缩放 1.3、使用winver命令查看Windows的年月版本 2、使用放大器模式遇…...

编程日记 2023/6/11 7:38:44

敲黑板！java反射机制和原理

获取Class对象&#xff1a;首先&#xff0c;你需要获取表示要操作的类的Class对象。可以使用以下三种方式之一来获取Class对象&#xff1a; Class.forName()方法&#xff1a;使用类的全限定名获取Class对象&#xff0c;例如&#xff1a;Class<? Class<?> clazz MyC…...

编程日记 2023/6/11 7:33:43

【大数据工具】HBase 集群搭建与基本使用

HBase 集群搭建 HBase 安装包下载地址&#xff1a;https://archive.apache.org/dist/hbase/ 安装 HBase 的前提&#xff1a; ZooKeeper 集群 OKHadoop 集群 OK 1. HBase 集群安装 1. 将 HBase 软件包上传至 Hadoop0 解压并重命名 使用 FileZilla 将 hbase-1.3.1-bin.tar.g…...

编程日记 2023/6/11 7:28:42

【Java】数组详解

文章目录 一、数组的基本认识1.1 数组的概念1.2数组的创建与初始化1.3 数组的使用 二、数组的类型 — 引用类型2.1 JVM 内存分布2.2 什么是引用类型2.3 基本类型变量与引用类型变量的区别2.4 Java 中的 null 三、数组的应用3.1 保存数据3.2 函数参数3.3 函数返回值 一、数组的基…...

编程日记 2023/6/11 7:23:41

NumPy库的学习

本文主要记录的是笔者在B站自学Numpy库的学习笔记。 引入numpy库 import numpy as np矩阵的创建 创建一个二行三列的矩阵。 array np.array([[1,2,3],[2,3,4]])查看array的行数、形状、元素数量 print("number of dim:",array.ndim) print("shape:"…...

编程日记 2023/6/11 7:18:40

CentOS安装IRIS

最近电脑提搞了&#xff0c;可以无顾虑创建虚拟机了&#xff0c;试一下在Linux安装IRIS&#xff0c;适用CentOS7.6上安装Intersystem公司的IRIS数据库&#xff0c;资料基本是空白&#xff0c;分享一下。 首先安装解压软件unzip和libicu&#xff0c;最小化安装的缺&#xff0c;…...

编程日记 2023/6/11 7:13:39

华为OD机试真题 JavaScript 实现【最多几个直角三角形】【2023Q1 100分】

一、题目描述 有 N 条线段&#xff0c;长度分别为 a[1]-a[n]。 现要求你计算这 N 条线段最多可以组合成几个直角三角形&#xff0c;每条线段只能使用一次&#xff0c;每个三角形包含三条线段。 二、输入描述 第一行输入一个正整数 T (1< T< 100) &#xff0c;表示有…...

编程日记 2023/6/11 7:08:38

vue3中的reactive、ref、toRef和toRefs

目录 reactivereactive的实现原理使用reactive的注意事项 refref的实现原理使用ref的注意事项 toRef和toRefsref和reactive的使用比较 reactive reactive用于创建响应式对象&#xff0c;它返回一个对象的响应式代理。即&#xff1a;它返回的对象以及其中嵌套的对象都会通过 Pr…...

编程日记 2023/6/11 7:03:37

数字图像处理与Python实现-图像增强经典算法汇总

图像增强经典算法汇总 文章目录 图像增强经典算法汇总1、像素变换2、图像逆变换3、幂律变换4、对数变换5、图像均衡化6、对比度受限自适应直方图均衡（CLAHE）7、对比度拉伸8、Sigmoid校正9、局部对比度归一化10、总结本文将对图像增强经典算法做一个简单的汇总。图像增强的经典…...

编程日记 2023/6/11 6:58:36

tag提示词总结

顺序的权重 越靠前的tag权重越大&#xff0c;越靠后的tag权重越小经验来讲&#xff0c;将图像质量相关的tag放在前面&#xff0c;例如masterpiece&#xff0c;best quality等&#xff1b;接着添加主体画风等&#xff1b;最后添加一些不太重要的细节 权重增减 (tag)&#xff1a…...

编程日记 2023/6/11 6:53:35

微信小程序原生开发功能合集二十：导航栏、tabbar自定义及分包功能介绍

本章实现导航栏及tabbar的自定义处理的相关方法介绍及效果展示。   另外还提供小程序开发基础知识讲解课程，包括小程序开发基础知识、组件封装、常用接口组件使用及常用功能实现等内容，具体如下：    1. CSDN课程： https://edu.csdn.net/course/detail/37977    2. 5…...

编程日记 2023/6/11 6:48:34

高通 Camera HAL3：项目开发技术点总结

做高通 Camera HAL3开发的一些技术点的总结、整理。 做个记录&#xff0c;方便后续查阅。 1.目录、so、配置文件 productName是项目名 out Target路径&#xff1a;\out\target\product\productName\chi-cdk&#xff1a;\vendor\qcom\proprietary\chi-cdk\ldc node&#xff1…...

编程日记 2023/6/11 6:43:33

chatgpt赋能python：Python怎么删除列表中的最大值和最小值

Python怎么删除列表中的最大值和最小值 在Python中&#xff0c;一个列表&#xff08;List&#xff09;是一种非常常见的数据结构&#xff0c;它允许我们以有序的方式存储和访问数据。但是&#xff0c;有时候我们需要从列表中删除最大或最小的值&#xff0c;以满足我们的特定需…...

编程日记 2023/6/11 6:38:32

简述Vue的生命周期以及每个阶段做的事情

03_简述Vue的生命周期以及每个阶段做的事情 思路 给出概念 列举出生命周期各个阶段 阐述整体流程 结合实际 扩展&#xff1a;vue3变化 回答范例 每个vue组件实例被创建后都会经过一系列步骤。比如它需要数据观测、模板编译、挂载实例到dom、以及数据变化的时候更新dom、…...

编程日记 2023/6/11 6:33:31

LeetCode-C#-0004.寻找两个正序数组的中位数

0.声明 该题目来源于LeetCode 如有侵权&#xff0c;立马删除。 解法不唯一&#xff0c;如有新解法可一同讨论。 1.题目 0004寻找两个正序数组的中位数 给定两个大小分别为m和n的正序&#xff08;从小到大&#xff09;数组nums1和nums2。 请你找出并返回着两个正序数组的中位…...

编程日记 2023/6/11 6:28:30

Vue.js 中的 $emit 和 $on 方法有什么区别？

Vue.js 中的 $emit 和 $on 方法有什么区别&#xff1f; 在 Vue.js 中&#xff0c;$emit 和 $on 方法是两个常用的方法&#xff0c;用于实现组件间的通信。它们可以让我们在一个组件中触发一个自定义事件&#xff0c;并在另一个组件中监听这个事件&#xff0c;从而实现组件间的…...

编程日记 2023/6/11 6:23:29

LAZADA平台的商品评论Python封装API接口接入文档和参数说明

LAZADA是一个位于东南亚的电商平台&#xff0c;成立于2012年。该平台覆盖的国家包括新加坡、马来西亚、印尼、菲律宾、泰国和越南等地。它提供了一个多样化的产品选择&#xff0c;包括时尚、美容、数码、母婴等商品&#xff0c;并且拥有许多知名品牌的官方旗舰店。同时&#xf…...

编程日记 2023/6/11 6:18:28

云原生Docker镜像管理

docker是什么&#xff1f; docker是一个go语言开发的应用容器引擎。 docker的作用&#xff1f; ①运行容器里的应用&#xff1b; ②docker是用来管理容器和镜像的一种工具。 #容器 与 虚拟机 的区别&#xff1f; 容器虚拟机所有容器共享宿主机内核每个虚拟机都有独立的操…...

编程日记 2023/6/11 6:13:27

基于大模型的 UI 自动化系统

基于大模型的 UI 自动化系统 下面是一个完整的 Python 系统，利用大模型实现智能 UI 自动化，结合计算机视觉和自然语言处理技术，实现"看屏操作"的能力。 系统架构设计 #mermaid-svg-2gn2GRvh5WCP2ktF {font-family:"trebuchet ms",verdana,arial,sans-…...

编程新知 2025/6/21 5:42:11

STM32+rt-thread判断是否联网

一、根据NETDEV_FLAG_INTERNET_UP位判断 static bool is_conncected(void) {struct netdev *dev RT_NULL;dev netdev_get_first_by_flags(NETDEV_FLAG_INTERNET_UP);if (dev RT_NULL){printf("wait netdev internet up...");return false;}else{printf("loc…...

编程新知 2025/7/30 23:37:23

【Redis技术进阶之路】「原理分析系列开篇」分析客户端和服务端网络诵信交互实现（服务端执行命令请求的过程 - 初始化服务器）

服务端执行命令请求的过程 【专栏简介】【技术大纲】【专栏目标】【目标人群】1. Redis爱好者与社区成员2. 后端开发和系统架构师3. 计算机专业的本科生及研究生 初始化服务器1. 初始化服务器状态结构初始化RedisServer变量 2. 加载相关系统配置和用户配置参数定制化配置参数案…...

编程新知 2025/8/31 3:57:48

零基础设计模式——行为型模式 - 责任链模式

第四部分&#xff1a;行为型模式 - 责任链模式 (Chain of Responsibility Pattern) 欢迎来到行为型模式的学习&#xff01;行为型模式关注对象之间的职责分配、算法封装和对象间的交互。我们将学习的第一个行为型模式是责任链模式。 核心思想&#xff1a;使多个对象都有机会处…...

编程新知 2025/8/27 2:56:26

[Java恶补day16] 238.除自身以外数组的乘积

给你一个整数数组 nums&#xff0c;返回 数组 answer &#xff0c;其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积 。 题目数据 保证 数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位 整数范围内。 请 不要使用除法&#xff0c;且在 O(n) 时间复杂度…...

编程新知 2025/8/6 19:10:59

Reasoning over Uncertain Text by Generative Large Language Models

https://ojs.aaai.org/index.php/AAAI/article/view/34674/36829https://ojs.aaai.org/index.php/AAAI/article/view/34674/36829 1. 概述 文本中的不确定性在许多语境中传达，从日常对话到特定领域的文档（例如医学文档）（Heritage 2013；Landmark、Gulbrandsen 和 Svenevei…...

编程新知 2025/9/4 15:51:16

蓝桥杯 冶炼金属

原题目链接 &#x1f527; 冶炼金属转换率推测题解 &#x1f4dc; 原题描述 小蓝有一个神奇的炉子用于将普通金属 O O O 冶炼成为一种特殊金属 X X X。这个炉子有一个属性叫转换率 V V V&#xff0c;是一个正整数&#xff0c;表示每 V V V 个普通金属 O O O 可以冶炼出 …...

编程新知 2025/6/21 11:16:25

AirSim/Cosys-AirSim 游戏开发（四）外部固定位置监控相机

这个博客介绍了如何通过 settings.json 文件添加一个无人机外的 固定位置监控相机&#xff0c;因为在使用过程中发现 Airsim 对外部监控相机的描述模糊&#xff0c;而 Cosys-Airsim 在官方文档中没有提供外部监控相机设置&#xff0c;最后在源码示例中找到了&#xff0c;所以感…...

编程新知 2025/8/30 7:40:43

CSS | transition 和 transform的用处和区别

省流总结&#xff1a; transform用于变换/变形&#xff0c;transition是动画控制器 transform 用来对元素进行变形&#xff0c;常见的操作如下&#xff0c;它是立即生效的样式变形属性。 旋转 rotate(角度deg)、平移 translateX(像素px)、缩放 scale(倍数)、倾斜 skewX(角度…...

编程新知 2025/7/11 23:09:41

通过 Ansible 在 Windows 2022 上安装 IIS Web 服务器

拓扑结构 这是一个用于通过 Ansible 部署 IIS Web 服务器的实验室拓扑。 前提条件&#xff1a; 在被管理的节点上安装WinRm 准备一张自签名的证书 开放防火墙入站tcp 5985 5986端口 准备自签名证书 PS C:\Users\azureuser> $cert New-SelfSignedCertificate -DnsName &…...

编程新知 2025/9/3 1:06:02