SVG标签能否使用click函数？JS模拟<polygon>点击失效求助

首先明确：SVG元素是支持点击事件的，但你直接调用element.click()无效，主要有两个核心原因，下面我会逐一解释并给出可行的解决方案。

为什么直接调用click()无效？ #

• SVG元素的方法兼容性限制：早期浏览器中，SVG元素（比如<polygon>）并没有像HTML元素（如<button>）那样默认实现click()方法。即使在现代浏览器中，部分SVG元素的原生click()方法也可能无法正确触发绑定的事件处理器。
• 未绑定点击事件处理函数：就算click()方法能执行，如果你的<polygon>没有预先绑定任何点击事件逻辑（比如onclick属性或addEventListener），模拟点击自然不会有任何可见效果。

可行的解决办法 #

方法1：使用dispatchEvent触发标准点击事件 #

这是最可靠的方式，通过手动创建并分发click事件来模拟用户点击，所有支持SVG的现代浏览器都兼容。

步骤如下：

1. 先给<polygon>绑定点击事件处理函数（如果还没绑定的话）
2. 创建MouseEvent对象并通过dispatchEvent触发

完整代码示例：

<html> 
<svg width="300" height="200"> 
  <polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" /> 
</svg> 
<script> 
var polygons = document.getElementsByTagName('polygon'); 
if(polygons.length>0) { 
  // 第一步：绑定点击事件逻辑
  const polygon = polygons[0];
  polygon.addEventListener('click', function() {
    console.log("Polygon被点击了！");
    // 在这里添加你的点击处理逻辑，比如弹窗、样式变化等
    this.style.fill = 'orange'; // 示例：点击后改变填充色
  });

  // 第二步：模拟点击
  const clickEvent = new MouseEvent('click', {
    bubbles: true,
    cancelable: true,
    view: window
  });
  polygon.dispatchEvent(clickEvent);
}
</script>
</html>

方法2：兼容旧版浏览器的写法（可选） #

如果需要兼容非常老旧的浏览器（比如IE11及更早），可以使用document.createEvent来创建事件：

var evt = document.createEvent('MouseEvents');
evt.initMouseEvent('click', true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
polygons[0].dispatchEvent(evt);

额外注意事项 #

• 确保SVG元素可交互：如果你的<polygon>没有任何视觉反馈或无法被聚焦，可以给它添加tabindex="0"属性，让它能通过键盘触发点击，同时提升可访问性。
• 检查元素遮挡：确认没有其他元素（比如SVG内部的其他图形或外部HTML元素）覆盖在<polygon>上方，导致点击事件被拦截。

内容的提问来源于stack exchange，提问作者Shibu