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

源码分析之Leaflet中dom模块DomEvent.DoubleTap的实现原理

news 来源：原创 2025/8/4 6:13:15

概述

DomEvent.DoubleTap模块是Leaflet中用于模拟双击(dbclick)事件的模块，主要解决移动端浏览器对双击事件支持不完善或延迟的问题，同时避免与标签(<label>)关联的表单元素误触发。

源码分析

源码实现如下

DomEvent.DoubleTap的源码实现如下：

function makeDblclick(event) {var newEvent = {},prop,i;// 复制原始事件的所有属性（包括方法）  for (i in event) {prop = event[i];newEvent[i] = prop && prop.bind ? prop.bind(event) : prop;}event = newEvent;// 修改事件类型为dbclick，并标记为模拟事件newEvent.type = "dblclick";newEvent.detail = 2;//表示双击newEvent.isTrusted = false;//非浏览器原生触发newEvent._simulated = true; //Leaflet内部标记return newEvent;
}var delay = 200;
export function addDoubleTapListener(obj, handler) {// 直接监听原生dbclick事件（桌面浏览器）obj.addEventListener("dblclick", handler);var last = 0,detail;function simDblclick(e) {//忽略非单次点击事件if (e.detail !== 1) {detail = e.detail;return;}// 过滤鼠标事件，仅处理触控或笔触if (e.pointerType === "mouse" ||(e.sourceCapabilities && !e.sourceCapabilities.firesTouchEvents)) {return;}// 检查事件路径，避免label元素误触发var path = DomEvent.getPropagationPath(e);if (path.some(function (el) {return el instanceof HTMLLabelElement && el.attributes.for;}) &&!path.some(function (el) {return (el instanceof HTMLInputElement || el instanceof HTMLSelectElement);})) {return;}// 计算事件间隔，模拟双击var now = Date.now();if (now - last <= delay) {detail++;if (detail === 2) {handler(makeDblclick(e)); //触发自定义dbclick事件}} else {detail = 1;}last = now;}// 监听click事件，通过时间间隔判断双击obj.addEventListener("click", simDblclick);return {dblclick: handler,simDblclick: simDblclick,};
}export function removeDoubleTapListener(obj, handlers) {obj.removeEventListener("dblclick", handlers.dblclick);obj.removeEventListener("click", handlers.simDblclick);
}

源码详解

makeDbclick(event)函数：构造模拟的双击事件：

目的：克隆原始事件并转换为自定义的 dblclick 事件，用于模拟双击行为。
关键点：
- 属性复制：遍历原始事件属性，若属性是方法（如 preventDefault），则绑定到原始事件上下文。
- 标记为非可信事件：isTrusted: false 表示此事件由脚本生成，而非用户直接操作触发。

addDoubleTapListener(obj, handler)函数：添加双击监听：

核心逻辑：
1. 双重监听：
  - 直接监听原生 dblclick（桌面浏览器有效）。
  - 通过 click 事件模拟移动端双击（simDblclick）。
2. 过滤非触控事件：
  - pointerType === 'mouse'：排除鼠标操作。
  - sourceCapabilities.firesTouchEvents：仅处理触控或笔触（Chrome 特性）。
3. 避免 <label> 误触发：
  - 若事件路径中存在关联 <label for> 但无对应表单元素（如 <input>），则忽略点击。
4. 时间间隔判断：
  - 两次 click 间隔小于 200ms 视为双击，触发自定义 dblclick 事件。

removeDoubleTapListener(obj, handlers)函数：移除双击监听

目的：移除之前通过addDoubleTapListener添加的 dblclick 和 simDblclick 事件监听器。
关键点：需传入之前返回的handles对象，确保移除正确的监听函数。

关键设计思想

移动端兼容性：
移动端浏览器通常不直接支持dbclick事件，通过快速连续点击(click)模拟双击行为
避免冲突:
- 过滤 <label> 元素点击，防止其关联的表单元素（如复选框）被误操作。
- 区分触控和鼠标事件，避免重复处理。
性能优化:
- 使用 200ms 间隔判断双击，平衡响应速度和误触概率。
- 通过 DomEvent.getPropagationPath(e) 获取事件传播路径，精确控制事件逻辑。

使用场景

地图双击缩放：用户快速双击地图时，触发放大地图的操作。
移动端手势支持：在触控设备上实现与桌面浏览器一致的双击交互。

潜在问题与注意事项

事件可信度：
模拟的 dblclick 事件 isTrusted: false，某些安全策略可能限制其行为（如阻止默认动作）。
时间间隔敏感性：

200ms 的间隔可能导致部分用户操作未被识别为双击，需根据实际需求调整。

浏览器兼容性：

sourceCapabilities 是 Chrome 特有属性，其他浏览器可能需额外兼容处理。
DomEvent.getPropagationPath 是 Leaflet 内部方法，用于获取事件传播路径（等价于 e.composedPath()）。

总结

核心功能：通过监听快速连续的 click 事件模拟 dblclick，解决移动端兼容性问题。
设计亮点：
- 双重事件监听（原生 + 模拟）兼顾不同环境。
- 路径过滤避免误触发。
- 严格区分触控与鼠标事件。
适用场景：需要跨平台支持双击交互的 Web 应用（尤其是地图库）。

源码分析之Leaflet中dom模块DomEvent.DoubleTap的实现原理

概述 DomEvent.DoubleTap模块是Leaflet中用于模拟双击(dbclick)事件的模块，主要解决移动端浏览器对双击事件支持不完善或延迟的问题，同时避免与标签(<label>)关联的表单元素误触发。源码分析源码实现如下 DomEvent.DoubleTap的源码实现如下&…...

编程日记 2025/8/4 6:13:15

记录一次，rabbitmq开启stomp插件之后，还是连不上15674端口的问题

原因是装在docker 里面的rabbitmq 没有映射15674端口，需重新删除容器之后重新运行 docker run -d --name rabbitmq -p 5672:5672 -p 15672:15672 -p 15674:15674 -p 1883:1883 -p 15675:15675 rabbitmq:版本号进入docker容器开启插件 docker exec -it rabbitm…...

编程日记 2025/8/3 1:37:07

git clone项目报错fatal: fetch-pack: invalid index-pack output问题

前情回顾：git项目放在公司服务器上面，克隆等操作需要连接VPN才能操作。由于项目比较大，网速比较慢，克隆项目经常出现fetch-pack: invalid index-pack output。在网上查找各种解决方法。也就这一种有点效果。仅供参考，不…...

编程日记 2025/7/20 14:50:09

【access开发】导入excel 并生成表

hi，大家好呀！ 最近天气越来越暖了，在这个春暖花开的季节了，每天心情应该都是美美的，正所谓一年之计在于春，在这个美好的季节，大家一起努力学习学习吧！那我们来看看今天学点啥呢&…...

编程日记 2025/8/4 6:09:15

利用knn算法实现手写数字分类

利用knn算法实现手写数字分类 1.作者介绍2.KNN算法2.1KNN（K-Nearest Neighbors）算法核心思想2.2KNN算法的工作流程2.3优缺点2.4 KNN算法图示介绍 3.实验过程3.1安装所需库3.2 MNIST数据集3.3 导入手写数字图像进行分类3.4 完整代码3.5 实验结果 1.作者介…...

编程日记 2025/7/31 20:24:42

从零开始实现 C++ TinyWebServer 处理请求 HttpRequest类详解

文章目录 HTTP 请求报文HttpRequest 类实现 Init() 函数实现 ParseRequestLine() 函数实现 ParseHeader() 函数实现 ParsePath() 函数实现 ParseBody() 函数实现 ParsePost() 函数实现 ParseFromUrlEncoded() 函数实现 UserVerify() 函数实现 Parse() 函数HttpRequest 代码Http…...

编程日记 2025/7/19 11:05:25

Android开发layer-list

Android开发layer-list 它的用处可以在drawable上进行多图拼接，比如启动页，不想图片被拉伸就这么做。还有做某些线突出来。示例代码： <?xml version"1.0" encoding"utf-8"?> <layer-list xmlns:android&q…...

编程日记 2025/8/4 6:12:00

如何提升库存系统的高并发和稳定性：算法与设计模式

库存系统是企业运营的核心模块，尤其是在电商、零售和供应链管理中，系统的高并发和稳定性直接影响订单处理的准确性和效率。面对海量订单、复杂的库存管理需求，如何在高并发环境下确保库存数据的准确性和系统的稳定性？本文将从架构…...

编程日记 2025/7/30 8:20:43

关于CNN,RNN,GAN,GNN,DQN,Transformer,LSTM,DBN你了解多少

以下是神经网络中常见的几种模型的简要介绍： 1. CNN (Convolutional Neural Network, 卷积神经网络) 用途: 主要用于图像处理和计算机视觉任务。特点: 通过卷积核提取局部特征，具有平移不变性，能够有效处理高维数据（如图像…...

编程日记 2025/8/3 6:30:06

设计模式之装饰器模式

装饰器模式(Decorator)依然是我们设计模式中的结构型模式，其中的构造思想仍然是对多个类进行组合使用，以达成系统调用实现指定功能的设计模式。装饰器模式不论在我们日常开发过程中还是在我们提升技术阅读源码过程中都是比较常见的，但是整体学…...

编程日记 2025/7/30 4:11:25

Mistral AI发布开源多模态模型Mistral Small 3.1：240亿参数实现超越GPT-4o Mini的性能

法国人工智能初创公司Mistral AI于2025年3月正式推出新一代开源模型Mistral Small 3.1 ，该模型凭借240亿参数的轻量级设计，在多项基准测试中表现优异，甚至超越了Google的Gemma 3和OpenAI的GPT-4o Mini等主流专有模型。 1、核心特性与优势多…...

编程日记 2025/7/29 1:36:53

SpringBoot3实战（SpringBoot3+Vue3基本增删改查、前后端通信交互、配置后端跨域请求、数据批量删除(超详细)）(3)

目录一、从0快速搭建SpringBoot3工程、SpringBoot3集成MyBatis、PageHelper分页查询的详细教程。(博客链接) 二、实现前端与后端通信对接数据。(axios工具) （1）安装axios。(vue工程目录) （2）封装请求工具类。(request.js) <1&…...

编程日记 2025/8/1 17:28:34

LabVIEW发电平台数据采集系统

本文详细介绍了基于LabVIEW的摇臂式波浪发电平台数据采集系统的设计与实现。通过整合LabVIEW软件与多种传感器技术，本系统能够有效提升数据采集的准确性和效率，为波浪能的利用和发电设备的优化提供科学依据。项目背景随着全球能源需求增长和环境保…...

编程日记 2025/8/2 16:43:51

人工智能（AI）系统化学习路线

一、为什么需要系统化学习AI？ 人工智能技术正在重塑各行各业，但许多初学者容易陷入误区： ❌ 盲目跟风：直接学习TensorFlow/PyTorch，忽视数学与算法基础。 ❌ 纸上谈兵：只看理论不写代码，无法解…...

编程日记 2025/7/30 1:22:43

oracle事务的组成

1)数据库事务由以下的部分组成: 一个或多个DML 语句 ; 一个 DDL(Data Definition Language – 数据定义语言) 语句； 一个 DCL(Data Control Language – 数据控制语言)语句； 2)事务的执行开始： 以第一个 DML 语句的执行作为开始 ，…...

编程日记 2025/8/3 18:16:01

第二十八篇数据获取与数据分析：数仓体系下的专业化分工与协同

声明：文章内容仅供参考，需仔细甄别。文中技术名称属相关方商标，仅作技术描述；代码示例为交流学习用途，部分参考开源文档（Apache 2.0/GPLv3）；案例数据已脱敏，技术推荐保持…...

编程日记 2025/8/4 1:28:09

SpringSecurity——前后端分离登录认证

SpringSecurity——前后端分离登录认证的整个过程前端： 使用Axios向后端发送请求 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>登录</title><script src"https://cdn…...

编程日记 2025/7/28 15:01:34

【AI】Orin Nano+ubuntu22.04上移植YoloV11，并使用DeepStream测试成功

1、准备工作使用 sdk-manager 烧写 OrinNano， JetPack版本为6.0 DP，对应操作系统为：Ubuntu22.04 参见博客：【NVIDIA】Jetson Orin Nano系列：烧写Ubuntu22.04 2、安装 PyTorch 2.1 下载依赖 1）安装onnx pip install onnx -i https://pypi.tuna.tsinghua.edu.cn/sim…...

编程日记 2025/8/1 20:41:02

RHCE 使用nginx搭建网站

一。准备工作 Windows dns映射创建目录网页 vim 编辑内容添加如下重启nginx服务，在Windows浏览器进行测试...

编程日记 2025/8/4 6:11:59

arm linux下的读写信号量rw_semphore的实现

本文基于arm linux 5.10来介绍内核中使用的读写信号量rw remphore的实现代码。内核中信号量结构体struct rw_semaphore的定义在include/linux/rwsem.h 32位architectures下，结构体struct rw_semaphore中的count的使用如下： 先来看信号量的定义和初始化…...

编程日记 2025/7/31 13:09:25

搭建主从DNS、nfs、nginx

任务需求： 客户端通过访问 www.nihao.com 后，能够通过 dns 域名解析，访问到 nginx 服务中由 nfs 共享的首页文件，内容为：Very good, you have successfully set up the system. 各个主机能够实现时间同步，…...

编程日记 2025/7/28 1:20:55

Qt6+QML实现Windows屏幕录制

前言 Qt6提供了更丰富的多媒体支持类，使用Qt6 QMediaCaptureSession、QScreenCapture、QMediaRecorder，来实现一个屏幕录制的demo，其中QScreenCapture 最低版本 Qt6.5。支持录制的清晰度设置，选择视频保存位置，UI使用…...

编程日记 2025/8/3 6:30:13

python二级每日十题(1)

\ 第一题,在Python中，变量名的命名规则：以字母或下划线开头，后面跟字母、下划线和数字；不能以数字开头.故选c项,博主正确缩进：在逻辑行首的空白（空格和制表符）用来决定逻辑行的缩进层次&…...

编程日记 2025/7/31 9:42:59

记录一次truncate导致MySQL夯住的故障

目录环境信息： 故障描述： 处理过程： 原理分析： show processlist结果中的system lock含义： truncate原理： 1. TRUNCATE 的执行流程 2、TRUNCATE 表导致数据库夯住的原因 3、 TRUNCATE 表导致…...

编程日记 2025/7/23 22:49:33

Java Web应用程序实现用户登录、学生信息管理和验证码验证以及页面跳转等基本功能（IDEA）含（Ajax、JSTL）

一、具体框架以及代码功能的展示： 1. 文件结构 web03: 项目根目录。 src: 包含Java源代码。 cn.lvb: 主包。 bean: 包含实体类，如 Book 和 Student。 controller: 包含处理HTTP请求的Servlet类，如 DoLogin, Index, StuList1, VerifyCode。 …...

编程日记 2025/7/23 20:05:53

【Mybatis-plus】在mybatis-plus中 if test标签如何判断 list不为空

博主介绍：✌全网粉丝22W，CSDN博客专家、Java领域优质创作者，掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域✌ 技术范围：SpringBoot、SpringCloud、Vue、SSM、HTML、Nodejs、Python、MySQL、PostgreSQL、大数据、物…...

编程日记 2025/7/31 7:40:51

MySQL 事务（Transaction）详解

MySQL 事务（Transaction）详解 1. 什么是事务？ 事务（Transaction）是一组要么全部执行，要么全部回滚的 SQL 语句，用于保证数据一致性。事务一般用于银行转账、订单支付等操作，确保多个…...

编程日记 2025/7/27 4:45:00

Redis 知识点梳理

第一章 NoSQL数据库发展历史简介 1、 Web的历史发展历程 web1.0时代简介 web 1.0是以编辑为特征，网站提供给用户的内容是网站编辑进行编辑处理后提供的，用户阅读网站提供的内容这个过程是网站到用户的单向行为web1.0时代的代表站点为新浪，…...

编程日记 2025/8/4 6:10:16

github上传操作简单说明

前期准备 0.下载git（如果已经有了就不用了） 1.在GitHub上新建一个存储库 2.先在本地创建一个目录作为本地库目录，在目录里打开git bash进行上传上传过程 echo "# Garbled_repair" >> README.md 作用：创建一个…...

编程日记 2025/8/4 6:10:15

在 ASP .NET Core 9.0 中使用 Scalar 创建漂亮的 API 文档

示例代码：https://download.csdn.net/download/hefeng_aspnet/90407900 Scalar 是一款可帮助我们为 API 创建精美文档的工具。与感觉有些过时的默认 Swagger 文档不同，Scalar 为 API 文档提供了全新而现代的 UI。其简洁的设计让开发人员可以轻松找到测试…...

编程日记 2025/7/25 12:15:32

针对 pdf.mjs 文件因 MIME 类型错误导致的 Failed to load module script 问题解决方案

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of “application/octet-stream”. Strict MIME type checking is enforced for module scripts per HTML spec. pdf.mjs 这种问题该如何处理 nginx 针对 pdf.…...

编程日记 2025/7/28 1:20:58

Flink介绍与安装

Apache Flink是一个在有界数据流和无界数据流上进行有状态计算分布式处理引擎和框架。Flink 设计旨在所有常见的集群环境中运行，以任意规模和内存级速度执行计算。一、主要特点和功能 1. 实时流处理: 低延迟: Flink 能够以亚秒级的延迟处理数据流，非常…...

编程日记 2025/7/24 20:03:57

《双指针算法指南：LeetCode 经典题解（C++实现）》

《双指针算法指南：LeetCode 经典题解（C实现）》 —— 从快慢指针到对撞指针，刷题效率提升 200%！ 常⻅的双指针有两种形式，⼀种是对撞指针，⼀种是左右指针。对撞指针： ⼀般⽤于顺…...

编程日记 2025/8/2 19:18:20

kaggle上经典泰坦尼克项目数据分析探索

之前了解在kaggle上这个项目很火，最近想要加强一下python数据分析，所以在kaggle上找到这个项目进行学习探索，下面是将一些学习资料以及过程整理出来。一、首先我们了解一下项目背景以及如何找到这个项目。 kaggle项目地址: https://www.k…...

编程日记 2025/7/27 5:18:17

【深度学习】多目标融合算法（五）：定制门控网络CGC（Customized Gate Control）

目录一、引言二、CGC（Customized Gate Control，定制门控网络） 2.1 技术原理 2.2 技术优缺点 2.3 业务代码实践 2.3.1 业务场景与建模 2.3.2 模型代码实现 2.3.3 模型训练与推理测试 2.3.4 打印模型结构三、总结一、引言上一…...

编程日记 2025/7/25 22:43:39

Ubuntu上查看GPU使用情况并释放内存

先用nvidia-smi查看GPU当前使用情况再用fuser 命令查找对应显卡上占用 GPU 的进程最后查到了用kill -9强制杀掉进程（PID）即可...

编程日记 2025/7/21 23:03:17

大数据学习栈记——HBase安装

本文介绍大数据技术中流行的非关系型数据库HBase的安装，操作系统：Ubuntu24.04 安装Zookeeper 安装HBase前需要先安装Zookeeper，HBase使用Zookeeper作为其分布式协同服务，存储了HBase集群的元数据信息，并提供了分布式…...

编程日记 2025/8/3 1:18:12

[入门]NUC13配置Ubuntu20.04详细步骤

文章目录 1. 安装Ubuntu20.041.1 制作系统启动盘1.1.1 下载镜像文件1.1.2 配置启动盘 1.2 安装内存条、硬盘1.3 安装系统 2. 网卡驱动配置2.1 关闭安全启动2.2 安装intel官方网卡驱动backport2.2.1 第四步可能会出现问题 2.3 ubuntu官方的驱动2.4 重启 3. 软件安装3.1 录屏软件…...

编程日记 2025/7/30 20:34:05

【实战指南】用MongoDB存储文档和图片等大文件（Java实现）

一、前言在现代应用开发中，经常需要处理和存储大量的文档、图片等大文件。传统的关系型数据库在处理这类大文件时，往往会面临性能瓶颈、存储成本高等问题。而 MongoDB 作为一款流行的 NoSQL 数据库，提供了 GridFS 规范，能够很好地解决大文件存储的问题。GridFS 可以将大文…...

编程日记 2025/8/3 21:28:52

使用Gitee Go流水线部署个人项目到服务器指南

使用Gitee Go流水线部署个人项目到服务器指南前言！！！ 本文解决的问题： 你有一台ECS服务器，你在上面部署了一个Java服务也就是一个jar，你觉着你每次手动本地打包，上传，在通过命令去…...

编程日记 2025/8/1 15:11:29

使用Three.js渲染器创建炫酷3D场景

引言在当今数字化的时代，3D图形技术正以其独特的魅力在各个领域掀起波澜。从影视制作到游戏开发，从虚拟现实到网页交互，3D场景以其强烈的视觉冲击力和沉浸式的体验，成为了吸引用户、传达信息的重要手段。而Three.js，…...

编程日记 2025/8/1 3:49:28

Spring Boot 集成 Elasticsearch怎样在不启动es的情况下正常启动服务

解释在spingboot 集成es客户端后，每当服务启动时，服务默认都会查看es中是否已经创建了对应的索引，如果没有索引则创建。基于上面的规则我们可以通过配置不自动创建索引来达到在没有es服务的情况下正常启动服务。解决办法在entity类的Docu…...

编程日记 2025/7/30 18:46:29

明远智睿SD2351核心板：多接口融合，破解边缘计算难题

在边缘计算领域，明讯智睿SD2351核心板凭借丰富的接口资源与异构计算架构，成为工业网关与智能终端的理想选择。硬件配置升级 :处理器:四核Cortex-A35，256KB L2缓存，动态调频降低功耗;存储性能:emMC 5.0 HS400模式读写速度提升40%&a…...

编程日记 2025/7/27 23:04:57

xampp安装教程与配置

一、安装 XAMPP （一）下载访问官网：打开浏览器，访问 XAMPP 官方网站（https://www.apachefriends.org/zh_cn/index.html）。选择版本：根据你的操作系统（Windows、macOS 或 Linux&am…...

编程日记 2025/8/2 16:31:12

设计模式之单例模式（Singleton Pattern）

单例模式（Singleton Pattern）是一种常用的设计模式，确保一个类只有一个实例，并提供一个全局访问点。单例模式在许多场景中非常有用，例如配置管理、日志记录、线程池等。 ### **1. 单例模式的特点** 1. **唯一实例**&a…...

编程日记 2025/8/2 23:28:17

Androidstudio实现引导页文字动画

文章目录 1. 功能需求2. 代码实现过程1. 编写布局文件2. 实现引导页GuideActivity 3. 总结4. 效果演示5. 关于作者其它项目视频教程介绍 1. 功能需求 1、引导页具有两行文字（“疫情在前”和“共克时艰”），和向上的图标。 2、进入【引导页】…...

编程日记 2025/8/2 16:43:58

【linux】线程概念与控制

引言当现代CPU的晶体管密度逼近物理极限，多核架构已成为突破性能瓶颈的必由之路。在这个计算密集型任务与异步IO需求并行的时代，多线程编程不再是可选项，而是开发者必须掌握的核心技能。Linux作为承载着全球90%云计算负载的操作系统&#xf…...

编程日记 2025/8/1 23:38:40

Cesium 自定义路径导航材质

cesium 自定义路径导航纹理图片随便更换，UI 提供设计图片即可达到效果； 打开小马的weix 关注下搜索“技术链” 回复关键词《《路径》》获取原始代码； 拿到就能用轻松解决！帮忙点个关注吧！...

编程日记 2025/7/8 23:07:32

用 pytorch 从零开始创建大语言模型（五）：预训练无标注数据

用 pytorch 从零开始创建大语言模型（五）：预训练无标注数据 5 预训练无标注数据5.1 评估文本生成模型5.1.1 使用 GPT 生成文本5.1.2 计算文本生成损失5.1.3 计算训练集和验证集的损失 5.2 训练 LLM5.3 解码策略以控制随机性5.3.1 温度缩放&am…...

编程日记 2025/7/25 19:25:54

[AI速读]混合验证方案：如何高效解决RISC-V向量扩展的验证难题

RISC-V作为一种开源指令集架构，近年来在AI和高性能计算领域备受关注。其向量扩展（RVV）为处理并行数据提供了强大的支持，但复杂的异常处理和冒险检测机制也带来了验证上的巨大挑战。本文将结合一篇技术论文，解析一种混合验证方案，帮助开发者更高效地解决RVV的验证问题。一…...

编程日记 2025/7/28 8:51:35

概述