SVG内联时fill不生效主因是子元素自带高优先级内联fill属性，需删除后统一用svg标签fill或currentColor控制；img引入的SVG无法通过CSS修改fill。
点击后 fill 属性没变？检查 SVG 内联样式优先级
SVG 星星图标里用 fill="currentColor" 是常见写法，但一旦加了 CSS 类（比如 .star.active { fill: #ffc107; }），浏览器会按层叠规则忽略内联 fill——结果是 JS 改了 class，颜色却没变。根本原因是 SVG 的 fill 属性默认不继承 CSS，除非显式声明 fill: inherit 或用 currentcolor 且确保父元素 color 正确。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 把星星 SVG 的
fill属性删掉，改用 CSS 控制：<svg class="star"><path d="..." /></svg>，然后在 CSS 中写.star { fill: #dee2e6; } .star.active { fill: #ffc107; } - 如果必须保留内联
fill，JS 里就得用element.setAttribute('fill', '#ffc107')，而不是操作 class - 用 DevTools 检查 computed 样式，确认最终生效的
fill值来源，避免被!important或更高优先级规则覆盖
toggle() 调用后状态没同步？别直接读 classList.contains 判断 UI
用户点一次按钮，期望星星变黄；再点一次，变回灰。但如果逻辑写成「先读当前状态 → 再决定 set/remove」，就容易因异步、事件冒泡或重复绑定导致状态错乱。更稳的方式是用数据驱动：维护一个布尔变量（如 isFavorited），每次点击只更新它，再统一映射到 DOM。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 不要这样写：
if (el.classList.contains('active')) { el.classList.remove('active'); } else { el.classList.add('active'); } - 改成：
isFavorited = !isFavorited; el.classList.toggle('active', isFavorited); - 如果按钮要发网络请求，把请求成功作为状态更新的时机，失败时回滚
isFavorited，避免 UI 和服务端不一致
移动端双击变收藏？click 和 touchend 冲突怎么解
在 iOS Safari 或部分安卓浏览器上，单独监听 click 可能有 300ms 延迟，而监听 touchend 又可能触发两次（手指按下+抬起各一次），导致星星闪一下又恢复。这不是 bug，是浏览器对触摸事件的默认行为差异。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 只监听
click，但给按钮加cursor: pointer和touch-action: manipulation，让浏览器知道这是可点击区域，自动优化延迟 - 完全不用
touchend—— 现代移动端 click 已基本无延迟，除非你做手势识别 - 如果真要兼容老设备，用
event.preventDefault()+event.stopPropagation()在touchend里阻止默认行为，但必须同时禁用click监听，否则重复触发
收藏状态要持久化？localStorage 里存 ID 别存整个 DOM
刷新页面后星星该亮还是暗，取决于是否已收藏。很多人直接把 document.querySelector('.star').outerHTML 存进 localStorage，结果下次取出来只是字符串，没法响应点击。真正该存的是业务标识，比如文章 ID 或资源 URL 的哈希值。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给按钮加 data 属性：
<button data-item-id="post-123"><svg class="star">...</svg></button> - 初始化时读
localStorage.getItem('favoritedIds')（JSON 字符串），解析成 Set，再根据当前data-item-id决定是否加active类 - 别用
localStorage存大量数据——超过 5MB 可能报错；高频更新场景改用 IndexedDB
最容易被忽略的是服务端状态和本地缓存的竞态：用户离线点击收藏，本地变了，但请求失败，此时 localStorage 里已经记了“已收藏”，下次上线得主动轮询或用 Background Sync 补发。这点在弱网环境下特别明显。
