双击事件应使用 addEventListener('dblclick') 绑定，而非 HTML 的 ondblclick 属性；后者属内联处理，存在 this 指向错误、无法传参、不可移除、不支持事件选项及框架冲突等问题，仅适用于老系统兼容或静态示意。
双击事件不能靠 HTML 属性直接“解决”绑定问题
HTML 中的 ondblclick 属性确实能响应双击，但它不是“解决”事件绑定的方案，而是最原始、最受限的一种绑定方式。它本质是内联事件处理，和 JavaScript 动态绑定（如 addEventListener）在可维护性、作用域、复用性和调试能力上差距极大。
常见错误现象包括：无法传参（除非拼字符串）、this 指向 window 而非目标元素、无法移除（没有对应 removeEventListener 等价物）、与 JS 逻辑强耦合且难以测试。
- 只适合极简原型或临时调试，生产环境应避免
- 若函数定义在全局作用域外（如模块作用域、IIFE 内），
ondblclick="handleDblClick()"会报ReferenceError - 多个双击行为混用时，HTML 属性无法区分事件源细节（如
event.detail或修饰键状态）
ondblclick 属性的实际使用场景很窄
真正用到 ondblclick 属性的场景，基本只剩两类：老系统兼容性兜底、或静态文档中的交互示意（比如 MDN 示例页）。现代开发中，它几乎不参与真实业务逻辑。
例如，一个表格行需要双击编辑，用属性写法只能这样：
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
<tr ondblclick="editRow(123)"></tr>
但这就硬编码了 ID，无法动态生成；也无法监听 Ctrl + 双击触发高级编辑，更没法阻止默认行为（比如文本选中干扰）。
- 不支持事件捕获阶段
- 无法设置
{ once: true, passive: false }等选项 - 与框架（React/Vue）的事件系统冲突，会被覆盖或忽略
addEventListener('dblclick') 是标准做法
双击事件应统一用 addEventListener 绑定，这是唯一能精确控制生命周期、上下文和条件逻辑的方式。
关键点：
- 必须监听
dblclick，不是doubleclick（常见拼写错误） - 注意：移动端无原生双击事件，需自行基于
touchstart+ 时间间隔模拟 - 若元素内容可被选中（如文字），双击可能先触发浏览器文本选择，建议加
user-select: none - 在 React 中不要写
onDblClick到自定义组件上——它不会透传，需显式用props.onDblClick或 ref 转发
容易被忽略的 dblclick 兼容性细节
dblclick 在所有桌面浏览器中稳定支持，但有两个隐性坑：
- Firefox 对快速连续单击（dblclick，而 Chrome 更依赖系统级双击间隔（通常 500ms）
- 如果元素有 CSS
transform或pointer-events: none父层遮盖，事件可能不冒泡或完全丢失 - 在 Shadow DOM 中，需确保监听器挂载在正确的作用域（
shadowRoot内或 host 元素上），否则监听无效
复杂点在于：双击本质上是两次 click 的组合，但浏览器不保证中间没有其他事件（如 focus、input）插入——所以不要依赖 click 次数计数来模拟 dblclick，务必用原生事件。
