应使用 e.target.closest('.like-btn') 获取按钮，因复杂按钮内点击目标可能是图标、文字等子元素，直接判断 e.target.classlist 会失效；closest 从点击目标向上查找首个匹配元素，确保准确捕获按钮。
直接在点赞按钮的父容器上监听点击，用 e.target.closest('.like-btn') 一步拿到完整按钮区域，不管用户点的是图标、文字还是按钮边缘。
为什么不能只靠 event.target
复杂按钮内部常嵌套 <i></i>、<span></span> 或纯文本，点击不同位置时 e.target 可能是图标元素、文字节点甚至伪元素（如 ::before），它本身往往没有 .like-btn 类。若直接判断 e.target.classList.contains('like-btn')，绝大多数点击都会失效。
而 closest('.like-btn') 会从点击的真实目标出发，自动向上查找——包括检查它自己是否匹配，再逐级查父节点，直到找到第一个带 .like-btn 的元素（通常是按钮本身或其直接包裹容器）。
正确绑定和判断的三步写法
- 把事件监听器加在稳定父容器上，比如
document.querySelector('.post-list')，不要每次渲染后重新绑定所有子项 - 回调开头立刻执行：
const btn = e.target.closest('.like-btn'); - 加空值判断：
if (!btn) return;—— 防止点到空白处或非按钮区域时后续代码报错（如读取btn.dataset.id）
区分操作类型：用 data-action 统一收口
如果一个按钮内同时支持“点赞”和“取消点赞”，建议不靠 class 区分，而是用语义化属性：
- HTML 中写：
<button class="like-btn" data-action="toggle" data-post-id="123"><i class="icon-heart"></i> 点赞</button> - JS 中统一捕获：
const actionBtn = e.target.closest('[data-action]'); - 再分支处理：
if (actionBtn?.dataset.action === 'toggle') { /* 切换状态 */ }
这样比写多个 closest('.like-btn, .unlike-btn') 更清晰，也避免因 class 名细微差异导致漏匹配。
兼容性与降级提醒
closest() 在 IE 中完全不可用。现代项目（支持 Chrome 51+、Firefox 49+、Safari 10+）可放心使用；若需兼容 IE11 或更低版本，可用轻量 polyfill，或手动遍历父节点替代：
function closestPolyfill(el, selector) { while (el && !el.matches(selector)) el = el.parentElement; return el; }
