JS/CSS/HTML主题切换时SVG点击无法正常触发问题排查

点击SVG无响应是事件委托的取值逻辑有问题：

• 你给外层#scheme容器绑定点击事件后，直接读取event.target.id作为要切换的主题标识
• 点击纯文本按钮时，事件触发目标就是带id的<button>元素本身，能正常拿到auto/default这类主题值，所以切换正常
• 点击SVG区域时，实际命中的是按钮内部的<svg>标签，或是更内层的<rect>图形标签，这两个元素都没有设置id，读取到的id是空值，自然没法触发对应主题切换
• 点击SVG周围的按钮空白区时，命中的又是带id的button元素，所以这部分区域点击是正常的，和你遇到的现象完全一致。

1. 修正事件判断逻辑 #

不要直接取点击目标的id，顺着DOM冒泡路径向上查找最近的按钮元素，再读取它的id即可，不管点击的是按钮内的文本、SVG还是SVG内部图形，都能正确匹配到对应按钮。修改后的事件绑定代码如下：

let selector = document.getElementById('scheme');
selector.addEventListener('click', event => {
  const clickedBtn = event.target.closest('button');
  if (!clickedBtn || clickedBtn === selector) return;
  window.setTheme(clickedBtn.id);
});

可选优化：给按钮内的SVG加上pointer-events: none样式，让SVG本身不接收点击事件，点击时直接命中父级按钮，逻辑更稳定：

#scheme button svg {
  pointer-events: none;
}

2. 调整按钮样式扩大点击热区 #

给按钮增加内边距，就能实现SVG外围区域也可点击的效果，同时可以用flex布局消除SVG和按钮边缘的默认间隙，视觉更统一：

#scheme button {
  border: 1px solid red;
  background: none;
  color: inherit;
  text-decoration: underline;
  cursor: pointer;
  /* 内边距数值可根据需求调整，控制可点击区域大小 */
  padding: 4px 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

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