如何给列表中的每个svg添加点击事件实现点击切换填充颜色

问题原因 #

• 点击时触发事件的目标大概率是svg内部的<path>元素，而非svg本身，你的判断条件event.target.tagName === 'svg'永远无法命中（而且SVG元素的tagName实际返回的是全大写的SVG，大小写不匹配也会导致判断失效）
• 直接给DOM对象设置.color属性不会生效，需要修改style.color才会作用到样式上，且你的svg路径已经设置了fill="currentColor"，修改父级svg的color属性即可同步修改填充色
• 没有状态判断逻辑，无法实现点击切换效果

修正方案 #

方案1：纯JS实现（无需修改CSS） #

// 可自行修改两个色值
const DEFAULT_COLOR = '#333' // 你的默认填充色
const ACTIVE_COLOR = '#eb3b67' // 点击后的激活色

function changeColor(event)  {
    // 匹配点击区域最近的svg元素，不管点到path还是svg本身都能命中
    const targetSvg = event.target.closest('svg')
    if (!targetSvg) return
    
    // 读取激活状态切换颜色
    const isActive = targetSvg.dataset.isActive === 'true'
    targetSvg.style.color = isActive ? DEFAULT_COLOR : ACTIVE_COLOR
    targetSvg.dataset.isActive = String(!isActive)
}

document.querySelectorAll('.favorite').forEach(item =>{
    item.addEventListener('click', changeColor);
})

方案2：CSS类控制（更易维护，推荐） #

先加CSS样式：

/* 定义默认色和激活色，支持加过渡效果 */
.favorite svg {
  color: #333;
  transition: color 0.2s ease;
}
.favorite svg.active {
  color: #eb3b67;
}

对应的JS代码可以大幅简化：

function changeColor(event)  {
    const targetSvg = event.target.closest('svg')
    if (!targetSvg) return
    // 自动切换active类，原生方法直接实现切换效果
    targetSvg.classList.toggle('active')
}

document.querySelectorAll('.favorite').forEach(item =>{
    item.addEventListener('click', changeColor);
})

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