SVG元素onclick事件触发不稳定（仅偶尔生效）求助

兄弟，我来帮你捋捋这个点击不稳定的问题——你这情况我之前也碰到过几次，大概率是这几个常见原因导致的，给你几个排查和解决的方向：

• 先搞定点击区域的问题
  SVG的path元素有时候会因为路径本身的形状、viewBox设置，或者pointer-events属性的默认值，导致实际可点击的区域和你看到的不一样，甚至明明点了图标却没命中元素。你可以先给SVG根元素加个pointer-events: all;的样式，确保它能接收所有点击事件：

  <svg id="settings-icon" xmlns="http://www.w3.org/2000/svg" height="90px" viewBox="0 -960 960 960" width="40px" fill="#FFF" style="pointer-events: all;">
    <path d="(thepath)"></path>
  </svg>
  

  另外也可以把点击事件绑定到SVG根元素上，而不是内部的path，避免path的点击区域太小或者有空隙导致没触发。

• 换一种事件绑定方式
  你现在用的是内联onclick='settings()'的方式，这种有时候会因为页面上下文变化、元素被重新渲染等问题失效。试试用JS事件监听器来绑定，稳定性会好很多：

  // 等页面DOM完全加载后再绑定事件
  document.addEventListener('DOMContentLoaded', function() {
    const icon = document.getElementById('settings-icon');
    icon.addEventListener('click', settings);
  });
  
  function settings() {
    alert("hello");
  }
  

  这样绑定的事件不会轻易因为元素的内联属性被覆盖而失效。

• 检查有没有元素遮挡
  有时候页面上会有透明的div、或者其他层级更高的元素，虽然你肉眼看不到，但它们会挡住SVG的点击区域，导致你点的时候其实点到了遮挡元素，没触发SVG的事件。你可以打开浏览器开发者工具，在Elements面板里看看SVG元素的层级，或者用“选择元素”工具点击图标位置，看看选中的是不是你的SVG元素。

• 排查页面是否动态重绘了SVG
  如果你的页面有动态渲染逻辑（比如某些JS代码会重新生成这个SVG元素），那原来绑定的事件就会失效，因为新生成的SVG没有绑定onclick。这时候用事件委托的方式就很靠谱：

  // 把事件绑定到document上，不管SVG怎么被重绘，只要id对就会触发
  document.addEventListener('click', function(e) {
    if (e.target.closest('#settings-icon')) {
      settings();
    }
  });
  
  function settings() {
    alert("hello");
  }
  

你可以先从第一个方法开始试，一般点击区域的问题最常见，解决起来也最快～

内容来源于stack exchange