【JavaScript】点击穿透
点击穿透是指在某些场景下,⽤户在快速点击⻚⾯元素时,由于某些原因(例如⽹络延迟),
在前⼀个元素上的点击事件还没有完成时,下⼀个元素的点击事件就已经触发了,导致⽤户感
觉到⻚⾯点击⽆效或者出现异常。
解决点击穿透的⽅法有以下⼏种:
- 使⽤ debounce 或 throttle 函数。 这两种函数可以控制函数的执⾏频率,减少短时间内函
数的执⾏次数,从⽽减少点击穿透的可能性。 - 使⽤ CSS pointer-events 属性。将当前元素的 pointer-events 属性设为 none,可以禁⽤
当前元素的⿏标事件,从⽽避免在事件处理函数执⾏过程中发⽣点击穿透。 - 使⽤ touch 事件代替 click 事件。 在移动设备上,click 事件有300ms的延迟,可能会导致
点击穿透。使⽤ touchstart、touchend 等 touch 事件可以避免这个问题。 - 在 click 事件中使⽤ preventDefault 函数。在 click 事件的处理函数中调⽤ preventDefault
函数,可以阻⽌默认的事件⾏为,从⽽避免点击穿透。但是这种⽅法有可能会影响到⼀些
⽤户习惯,因此需要慎⽤。
相关文章:
【JavaScript】点击穿透
点击穿透是指在某些场景下,⽤户在快速点击⻚⾯元素时,由于某些原因(例如⽹络延迟), 在前⼀个元素上的点击事件还没有完成时,下⼀个元素的点击事件就已经触发了,导致⽤户感 觉到⻚⾯点击⽆效或者…...
[Linux]Mysql之主从同步
AB复制 一、主从复制概述 主从复制,是用来建立一个和主数据库完全一样的数据库环境,称为从数据库;主数据库一般是准实时的业务数据库。 主从复制的作用 1.做数据的热备,作为后备数据库,主数据库服务器故障后…...
DAY21-二叉树
LeetCode538.把二叉搜索树转换为累加树 public TreeNode convertBST(TreeNode root) {reverseIn(root);return root;}public Integer value0,flag0;public void reverseIn(TreeNode root) {if(rootnull) return ;reverseIn(root.right);if(flag0) {valueroot.val;flag1;}else {…...
java面试-场景题
一、集合 1. java中如何给一个超大的一个亿左右的list数据去重? 我当时的回答是使用HashSet或Stream流的distinct语法。但是面试官好像更注重内存的消耗问题。 使用HashSet: HashSet 是一个不允许有重复元素的集合。你可以将List中的元素添加到HashSe…...
【TORCH】matplotlib绘制一条横线的两种方法
在创建图形和数据可视化时,你提到的两种方法都用于绘制特定的线条,但它们在实现方式上有所不同。我将逐一解释这两种方法的具体含义和用途。 1. 使用列表创建常数值的线条 y [1] * len(x)这行代码生成了一个列表 y,其长度与 x 相同&#x…...
深入浅出mediasoup—WebRtcTransport
mediasoup 提供了多种 transport,包括 WebRtcTransport、PipeTransport、DirectTransport、PlainTransport 等,用来实现不同目的和场景的媒体通信。WebRtcTransport 是 mediasoup 实现与 WebRTC 客户端进行媒体通信的对象,是 mediasoup 最重要…...
如何让局域网中的其他电脑访问VMWare虚拟机上的Windows虚拟系统
场景描述 事情是这样的,我在我的主机(Win10)上搭建了一个VMWare虚拟机,并安装了Windows Server的虚拟系统,想用它来测试一些东西。但是呢,我发现尽管我的主机可以愉快地跟这个服务器对话,可办公…...
旧电脑回收前怎么清除数据
随着技术的快速更新换代,很多人的电脑也会不断的更新升级,比如给电脑升级硬件或是更换新电脑,从而获得更好的性能和体验。那么旧的电脑及电脑部件怎么处理更安全呢?我们要确保旧电脑上的个人数据被彻底清除干净,这样可…...
python——TinyDB
TinyDB 是一个轻量级的纯 Python 写入的文档数据库。它不需要单独的服务器进程或复杂的配置,只需导入模块即可开始使用。TinyDB 适合于小型项目或测试用例,它的数据存储在本地文件中。 TinyDB 的基本 API 和使用方式: 初始化数据库 from tin…...
【北京迅为】《i.MX8MM嵌入式Linux开发指南》-第三篇 嵌入式Linux驱动开发篇-第三十八章 驱动模块编译进内核
i.MX8MM处理器采用了先进的14LPCFinFET工艺,提供更快的速度和更高的电源效率;四核Cortex-A53,单核Cortex-M4,多达五个内核 ,主频高达1.8GHz,2G DDR4内存、8G EMMC存储。千兆工业级以太网、MIPI-DSI、USB HOST、WIFI/BT…...
Mailspring搭建安装教程:打造个性邮件体验
Mailspring搭建安装教程步骤!如何选择电子邮件服务商? Mailspring作为一款功能强大、界面友好的邮件客户端,成为了许多用户的首选。AokSend将为大家提供详细的Mailspring搭建安装教程,帮助您打造个性化的邮件体验。 Mailspring搭…...
【分布式锁】Redission实现分布式锁
接着上一节,我们遇到了超卖的问题,并通过Redis实现分布式锁,进行了解决。本节 我将换一种方式实现分布式锁。 前提: nginx、redis、nacos 模块1: provider-and-consumer 端口 8023 模块2 rabbitmq-consumer 端口 8021 …...
UE4/5 对话系统
参考教程:UE4甜筒教艺术生学蓝图#21.UE4对话系统(1)--唠嗑案例展示_哔哩哔哩_bilibili 说来惭愧两年前看的教程,现在才记录一下,很好的教程推荐大家观看 1.首先创建两个枚举,内容如下 2.创建三个结构体,内容如下 3.再…...
Golang | Leetcode Golang题解之第275题H指数II
题目: 题解: func hIndex(citations []int) int {n : len(citations)return n - sort.Search(n, func(x int) bool { return citations[x] > n-x }) }...
Python—面向过程编程,详细讲解(类和实例,初始化函数,类中封装数据与操作)
1.类和实例 类:类别 实例(对象):类型塑造出来的某一个具体的内容 isinstance(对象,类) 返回一个对象是否是一个类的实例 # 声明一个整数类的实例10 a int(10) # a 10 print(type(a), isinstance(a, int)) a flo…...
Linux云计算 |【第一阶段】SERVICES-DAY2
主要内容: DNS服务基础及搭建、特殊解析(针对地址库文件:DNS轮询 DNS泛域名解析 DNS别名)、缓存DNS(全局转发forwarders)、DNS递归迭代(子域授权)、DNS主从架构搭建、DNS主从数据同步 一、DNS工…...
el-upload照片墙自定义上传多张图片(手动一次性上传多张图片)包含图片回显,删除
需求:el-upload照片墙自定义上传多张图片(手动一次性上传多张图片)包含图片回显,删除,预览,在网上看了很多,都没有说怎么把数据转为file格式的,找了很久最终实现, 难点&a…...
三星Unpacked发布会即将举行:有新款折叠屏手机,还有智能戒指
随着7月的脚步渐近,科技界的目光再次聚焦于三星,它即将在法国巴黎举办今年的第二场Unpacked发布会。这不仅是一场新品的展示,更是三星对创新科技的一次深刻诠释。 从Galaxy Z Fold 6的全新设计,到Galaxy Z Flip 6的显著升级&…...
【Python】Matplotlib简要教程
文章目录 一、简介二、一些基本概念2.1 图表元素2.2 常见图表类型2.3 主要绘图函数及其返回值2.4 Artists 的概念 三、基本图表详解3.1 成对数据3.11 折线图:plot()🟨设置图表样式🟨设置各种标签🟨设置坐标轴🟨绘制子图…...
数驭未来,景联文科技构建高质大模型数据库
国内应用层面的需求推动AI产业的加速发展。根据IDC数据预测,预计2026年中国人工智能软件及应用市场规模会达到211亿美元。 数据、算法、算力是AI发展的驱动力,其中数据是AI发展的基石,中国的数据规模增长速度预期将领跑全球。 2024年《政府工…...
深入浅出Asp.Net Core MVC应用开发系列-AspNetCore中的日志记录
ASP.NET Core 是一个跨平台的开源框架,用于在 Windows、macOS 或 Linux 上生成基于云的新式 Web 应用。 ASP.NET Core 中的日志记录 .NET 通过 ILogger API 支持高性能结构化日志记录,以帮助监视应用程序行为和诊断问题。 可以通过配置不同的记录提供程…...
在HarmonyOS ArkTS ArkUI-X 5.0及以上版本中,手势开发全攻略:
在 HarmonyOS 应用开发中,手势交互是连接用户与设备的核心纽带。ArkTS 框架提供了丰富的手势处理能力,既支持点击、长按、拖拽等基础单一手势的精细控制,也能通过多种绑定策略解决父子组件的手势竞争问题。本文将结合官方开发文档,…...
基于服务器使用 apt 安装、配置 Nginx
🧾 一、查看可安装的 Nginx 版本 首先,你可以运行以下命令查看可用版本: apt-cache madison nginx-core输出示例: nginx-core | 1.18.0-6ubuntu14.6 | http://archive.ubuntu.com/ubuntu focal-updates/main amd64 Packages ng…...
【第二十一章 SDIO接口(SDIO)】
第二十一章 SDIO接口 目录 第二十一章 SDIO接口(SDIO) 1 SDIO 主要功能 2 SDIO 总线拓扑 3 SDIO 功能描述 3.1 SDIO 适配器 3.2 SDIOAHB 接口 4 卡功能描述 4.1 卡识别模式 4.2 卡复位 4.3 操作电压范围确认 4.4 卡识别过程 4.5 写数据块 4.6 读数据块 4.7 数据流…...
linux 错误码总结
1,错误码的概念与作用 在Linux系统中,错误码是系统调用或库函数在执行失败时返回的特定数值,用于指示具体的错误类型。这些错误码通过全局变量errno来存储和传递,errno由操作系统维护,保存最近一次发生的错误信息。值得注意的是,errno的值在每次系统调用或函数调用失败时…...
ESP32 I2S音频总线学习笔记(四): INMP441采集音频并实时播放
简介 前面两期文章我们介绍了I2S的读取和写入,一个是通过INMP441麦克风模块采集音频,一个是通过PCM5102A模块播放音频,那如果我们将两者结合起来,将麦克风采集到的音频通过PCM5102A播放,是不是就可以做一个扩音器了呢…...
HBuilderX安装(uni-app和小程序开发)
下载HBuilderX 访问官方网站:https://www.dcloud.io/hbuilderx.html 根据您的操作系统选择合适版本: Windows版(推荐下载标准版) Windows系统安装步骤 运行安装程序: 双击下载的.exe安装文件 如果出现安全提示&…...
前端开发面试题总结-JavaScript篇(一)
文章目录 JavaScript高频问答一、作用域与闭包1.什么是闭包(Closure)?闭包有什么应用场景和潜在问题?2.解释 JavaScript 的作用域链(Scope Chain) 二、原型与继承3.原型链是什么?如何实现继承&a…...
让AI看见世界:MCP协议与服务器的工作原理
让AI看见世界:MCP协议与服务器的工作原理 MCP(Model Context Protocol)是一种创新的通信协议,旨在让大型语言模型能够安全、高效地与外部资源进行交互。在AI技术快速发展的今天,MCP正成为连接AI与现实世界的重要桥梁。…...
服务器--宝塔命令
一、宝塔面板安装命令 ⚠️ 必须使用 root 用户 或 sudo 权限执行! sudo su - 1. CentOS 系统: yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh2. Ubuntu / Debian 系统…...
