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

移动端事件300ms延迟解决

news 2026/3/28 1:10:17

         有移动端与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

能源监控项目避坑指南：为什么DLT645电表直连Modbus系统会失败？

能源监控项目避坑指南&#xff1a;为什么DLT645电表直连Modbus系统会失败&#xff1f; 在智慧能源项目的实施过程中&#xff0c;数据采集的可靠性直接关系到整个系统的运行效果。许多项目团队在遇到DLT645规约电表与Modbus系统对接时&#xff0c;往往会尝试直接连接&#xff0c…...

编程新知 2026/3/27 23:57:07

Original PIPE vs. Serdes PIPE: Understanding the Key Differences in PHY Interface Design

1. 从零理解PIPE接口&#xff1a;物理层设计的通用语言 第一次接触PIPE接口时&#xff0c;我完全被各种缩写搞晕了。直到在某个PCIe项目中被时序问题折磨了整整两周后&#xff0c;才真正明白这个接口的重要性。简单来说&#xff0c;PIPE&#xff08;PHY Interface for PCI Expr…...

编程新知 2026/3/27 23:36:41

Milvus向量数据库Docker安装避坑指南：从配置到可视化工具Attu的完整流程

Milvus向量数据库Docker安装避坑指南&#xff1a;从配置到可视化工具Attu的完整流程 当开发者第一次接触向量数据库时&#xff0c;往往会遇到各种意想不到的"坑"。作为一款开源的向量数据库&#xff0c;Milvus因其高性能和易用性而广受欢迎&#xff0c;但在Docker环境…...

编程新知 2026/3/27 22:08:04

Qt串口通信实战：用QSerialPort从零搭建一个串口调试助手（附完整源码）

Qt串口通信实战&#xff1a;从零构建工业级调试助手 在嵌入式开发和工业控制领域&#xff0c;串口通信作为最基础也最可靠的通信方式之一&#xff0c;至今仍发挥着不可替代的作用。无论是单片机与上位机的数据交换&#xff0c;还是工业设备的参数配置&#xff0c;一个稳定高效的…...

编程新知 2026/3/27 22:02:03

MIB2 High Toolbox：重新定义车载娱乐系统定制体验

MIB2 High Toolbox&#xff1a;重新定义车载娱乐系统定制体验 【免费下载链接】mib2-toolbox The ultimate MIB2-HIGH toolbox. 项目地址: https://gitcode.com/gh_mirrors/mi/mib2-toolbox 车载娱乐系统是否还停留在出厂设置&#xff1f;想要个性化界面却苦于没有工具&…...

编程新知 2026/3/27 20:27:32

Realtek RTL8125 2.5GbE网卡驱动技术指南

Realtek RTL8125 2.5GbE网卡驱动技术指南 【免费下载链接】realtek-r8125-dkms A DKMS package for easy use of Realtek r8125 driver, which supports 2.5 GbE. 项目地址: https://gitcode.com/gh_mirrors/re/realtek-r8125-dkms 1. 问题诊断&#xff1a;网络设备识别…...

编程新知 2026/3/27 20:03:05

OpenClaw技能扩展：安装百川2-13B-4bits专用插件提升自动化能力

OpenClaw技能扩展&#xff1a;安装百川2-13B-4bits专用插件提升自动化能力 1. 为什么需要为OpenClaw安装专用插件 去年冬天&#xff0c;我在处理一批技术文档归档任务时&#xff0c;发现OpenClaw的基础能力虽然强大&#xff0c;但在处理特定领域内容时总有些力不从心。比如让…...

编程新知 2026/3/27 19:14:51

nli-distilroberta-base生产环境：金融风控中合同条款中立性识别实践

nli-distilroberta-base生产环境&#xff1a;金融风控中合同条款中立性识别实践 1. 项目背景与价值 在金融风控领域&#xff0c;合同条款的准确理解至关重要。传统人工审核方式效率低下且容易遗漏关键细节&#xff0c;而自然语言理解技术可以大幅提升审核效率和准确性。nli-d…...

编程新知 2026/3/27 17:31:57

别再只看灰度图了！用功率谱给你的AI生成图像质量把把脉

功率谱分析&#xff1a;AI生成图像质量评估的隐藏利器 当我们在评估AI生成的图像时&#xff0c;常常会陷入主观判断的陷阱——肉眼观察虽然直观&#xff0c;但缺乏量化标准。而功率谱分析这一源自信号处理的技术&#xff0c;正悄然成为AI图像质量评估领域的一把精准尺子。不同于…...

编程新知 2026/3/27 17:09:49

大模型“预训练”是怎么回事

经常在想&#xff0c;大模型是怎么学会“理解和生成语言”的。仔细看&#xff0c;它的训练过程其实很有规律&#xff0c;简单讲可以拆解成几个步骤。数据准备 训练大模型之前&#xff0c;最重要的是数据。我看到的做法是从各种网络资源收集海量文本&#xff0c;比如网页、书籍、…...

编程新知 2026/3/27 16:51:33