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

烟台市委网站官网个人博客搭建

wzjs 2025/8/8 21:50:28

烟台市委网站官网,个人博客搭建,网页设计图片滑动代码,做境外盈利网站违法吗概述 DomEvent.DoubleTap模块是Leaflet中用于模拟双击(dbclick)事件的模块，主要解决移动端浏览器对双击事件支持不完善或延迟的问题，同时避免与标签(<label>)关联的表单元素误触发。源码分析源码实现如下 DomEvent.DoubleTap的源码实现如下&…

概述

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) 获取事件传播路径，精确控制事件逻辑。