避坑笔记：Chrome 144+ SVG 事件失效问题

前端嘣擦擦2026-02-25 9:45

问题现象：

今天突发bug，在 Chrome 144 版本中，一套旧的代码里，SVG 元素的点击、双击或右键事件完全不响应，但视觉渲染正常。

核心原因：

Chrome 144（也可能是前两个版本，近期chrome 版本中多次出现svg变更）引入了严苛的指针边界事件对齐机制（svg2）。如果在 mouseover 或点击瞬间且多次触发了如 appendChild 或 selection.raise()，导致 DOM 节点被销毁并重新插入，浏览器会立即中断当前元素的事件流，判定交互失效。

解决方案：

避免在交互瞬间执行无意义的 DOM 重插。通过判断当前节点是否已在顶层来跳过冗余操作：

javascript 复制代码

const toTop = () => {
  const node = selection.node();
  // 仅在不在顶层时才执行移动，确保 DOM 稳定性
  if (node.parentNode.lastChild !== node) {
    node.parentNode.appendChild(node);
  }
};

经验总结

交互期间保持 DOM 树稳定是适配 Chrome 144+ 事件机制的关键。

重点：代码还是要严谨规范的。飘泪~

感谢

感谢gemini，要是我自己找怕是没这么快修复。