如何实现HTML SVG元素点击交互事件？

本文共计958个文字，预计阅读时间需要4分钟。

SVG元素点击事件在桌面端通常可以直接使用`addEventListener`绑定，但在iOS Safari（包括iPad）上，大约有50%的概率失效——这并非代码错误，而是SVG渲染层默认不响应pointer事件。

为什么 addEventListener('click', ...) 在 iPad 上不触发

iOS Safari 对嵌入式 SVG 的事件捕获有特殊限制：当 SVG 通过 <svg> 标签内联写入 HTML 时，部分版本（特别是 iOS 15–16）会忽略对子元素（如 <circle>、<rect>）的原生 click 监听，除非显式启用交互能力。

• pointer-events: all 必须加在目标 SVG 元素上（不能只加在父 <svg> 或 CSS 类里）
• 如果用 <embed> 或 <object> 引入外部 SVG，事件监听需跨 document 获取，原生 addEventListener 无法直接绑定
• jQuery 的 .on('click', ...) 在 iPad 上可能静默失败，因底层仍依赖 DOM 事件冒泡路径，而 iOS 对嵌入 SVG 的冒泡支持不一致

正确绑定点击事件的三种方式（按兼容性排序）

优先选方案 1；若项目已重度依赖 jQuery，用方案 3 但必须补 touchstart。