点击后隐藏cover：应使用.closest()还是.currentTarget？

优先选择方案2，也就是使用 evt.currentTarget.classList.add("hide")，原因很直观：

• 精准匹配目标元素：currentTarget的核心特性就是指向「绑定了当前事件处理函数的元素」——你要隐藏的正是这个被绑定了点击事件的cover，不管你点击的是cover本身，还是它内部的子元素（比如你提供的嵌套HTML里的子cover），currentTarget都会稳稳锁定你想要操作的那个元素，完全贴合需求。

• 更稳定、易维护：方案1依赖 evt.target.closest('.cover')，这里硬编码了.cover类名，如果后续你调整了类名（比如改成album-cover），必须同步修改closest的参数，否则代码直接失效。而方案2不需要依赖类名，只要事件绑定关系不变，代码就一直有效。

再说说方案1的潜在风险：如果你的cover内部有其他带.cover类的元素（就像你给出的嵌套结构），后续结构调整时可能出现误匹配——比如上层元素也有.cover类，极端情况下closest可能意外选中父级元素，而currentTarget完全不会有这个问题。

至于有没有更合适的实现方式？方案2已经是很标准的写法了，要是想让代码可读性更好，可以提前把currentTarget存成变量：

function coverClickHandler(evt) {
  const cover = evt.currentTarget;
  const wrapper = cover.nextElementSibling;
  show(wrapper);
  initPlayer(wrapper);
  cover.classList.add("hide");
}

这样逻辑更清晰，后续如果要对cover做其他操作，直接用变量就行。

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