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

移动端事件300ms延迟解决

news 2026/2/8 13:21:57

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

label-studio的使用教程(导入本地路径)

文章目录 1. 准备环境2. 脚本启动2.1 Windows2.2 Linux 3. 安装label-studio机器学习后端3.1 pip安装(推荐)3.2 GitHub仓库安装 4. 后端配置4.1 yolo环境4.2 引入后端模型4.3 修改脚本4.4 启动后端 5. 标注工程5.1 创建工程5.2 配置图片路径5.3 配置工程类型标签5.4 配置模型5.…...

编程新知 2026/2/7 20:40:53

MongoDB学习和应用(高效的非关系型数据库)

一丶 MongoDB简介 对于社交类软件的功能&#xff0c;我们需要对它的功能特点进行分析&#xff1a; 数据量会随着用户数增大而增大读多写少价值较低非好友看不到其动态信息地理位置的查询… 针对以上特点进行分析各大存储工具&#xff1a; mysql&#xff1a;关系型数据库&am…...

编程新知 2026/1/23 10:24:30

《用户共鸣指数（E）驱动品牌大模型种草：如何抢占大模型搜索结果情感高地》

在注意力分散、内容高度同质化的时代&#xff0c;情感连接已成为品牌破圈的关键通道。我们在服务大量品牌客户的过程中发现&#xff0c;消费者对内容的“有感”程度&#xff0c;正日益成为影响品牌传播效率与转化率的核心变量。在生成式AI驱动的内容生成与推荐环境中&#xff0…...

编程新知 2026/2/2 1:48:09

对WWDC 2025 Keynote 内容的预测

借助我们以往对苹果公司发展路径的深入研究经验&#xff0c;以及大语言模型的分析能力&#xff0c;我们系统梳理了多年来苹果 WWDC 主题演讲的规律。在 WWDC 2025 即将揭幕之际&#xff0c;我们让 ChatGPT 对今年的 Keynote 内容进行了一个初步预测&#xff0c;聊作存档。等到明…...

编程新知 2026/2/6 23:56:39

python爬虫：Newspaper3k 的详细使用（好用的新闻网站文章抓取和解析的Python库）

更多内容请见： 爬虫和逆向教程-专栏介绍和目录 文章目录 一、Newspaper3k 概述1.1 Newspaper3k 介绍1.2 主要功能1.3 典型应用场景1.4 安装二、基本用法2.2 提取单篇文章的内容2.2 处理多篇文档三、高级选项3.1 自定义配置3.2 分析文章情感四、实战案例4.1 构建新闻摘要聚合器…...

编程新知 2025/10/25 7:51:48

Maven 概述、安装、配置、仓库、私服详解

目录 1、Maven 概述 1.1 Maven 的定义 1.2 Maven 解决的问题 1.3 Maven 的核心特性与优势 2、Maven 安装 2.1 下载 Maven 2.2 安装配置 Maven 2.3 测试安装 2.4 修改 Maven 本地仓库的默认路径 3、Maven 配置 3.1 配置本地仓库 3.2 配置 JDK 3.3 IDEA 配置本地 Ma…...

编程新知 2026/2/8 1:58:01

Java 二维码

Java 二维码 **技术&#xff1a;**谷歌 ZXing 实现 首先添加依赖 <!-- 二维码依赖 --><dependency><groupId>com.google.zxing</groupId><artifactId>core</artifactId><version>3.5.1</version></dependency><de…...

编程新知 2025/9/6 16:22:45

【SSH疑难排查】轻松解决新版OpenSSH连接旧服务器的“no matching...“系列算法协商失败问题

【SSH疑难排查】轻松解决新版OpenSSH连接旧服务器的"no matching..."系列算法协商失败问题 摘要&#xff1a; 近期&#xff0c;在使用较新版本的OpenSSH客户端连接老旧SSH服务器时&#xff0c;会遇到 "no matching key exchange method found"​, "n…...

编程新知 2025/9/29 4:00:38

uniapp手机号一键登录保姆级教程（包含前端和后端）

目录 前置条件创建uniapp项目并关联uniClound云空间开启一键登录模块并开通一键登录服务编写云函数并上传部署获取手机号流程(第一种) 前端直接调用云函数获取手机号&#xff08;第三种&#xff09;后台调用云函数获取手机号 错误码常见问题 前置条件 手机安装有sim卡手机开启…...

编程新知 2026/1/27 2:03:36

DeepSeek源码深度解析 × 华为仓颉语言编程精粹——从MoE架构到全场景开发生态

前言 在人工智能技术飞速发展的今天&#xff0c;深度学习与大模型技术已成为推动行业变革的核心驱动力&#xff0c;而高效、灵活的开发工具与编程语言则为技术创新提供了重要支撑。本书以两大前沿技术领域为核心&#xff0c;系统性地呈现了两部深度技术著作的精华&#xff1a;…...

编程新知 2026/2/5 4:33:51