onclick事件无法正确获取.card目标元素问题排查

• e.target 指向.card__face子元素是事件冒泡的正常表现：target永远指向用户实际点击的最底层DOM元素。你的卡片正反面元素设置了绝对定位，完全铺满父级.card区域，渲染时会叠在.card本身的层之上，鼠标点击时最先命中的就是正反面子元素，而非父级.card。你之前给.card设置z-index:100不生效，是因为z-index只控制同级元素的层叠顺序，父元素的z-index再高，也不会覆盖自身内部的定位子元素。
• e.currentTarget 值为null是事件对象的生命周期特性导致：currentTarget仅在事件处理函数同步执行的阶段，指向当前绑定了事件处理逻辑的元素；等事件传播流程全部结束后，浏览器会自动将该属性重置为null。你在控制台打印事件对象后，手动展开对象查看属性的操作是异步的，此时事件已经处理完成，所以看到的currentTarget为null。哪怕使用addEventListener绑定事件，如果在setTimeout这类异步回调中访问e.currentTarget，同样会拿到null。

方案1：改用addEventListener绑定事件（推荐） #

直接把事件绑定在.card元素上，同步执行阶段就能拿到正确的元素，删掉HTML里的行内onclick属性即可：

const card = document.querySelector(".card");
card.addEventListener("click", function (e) {
    // 同步执行时e.currentTarget就是绑定事件的.card元素
    e.currentTarget.classList.toggle("is-flipped");
});

方案2：行内绑定时直接传入当前元素 #

如果要保留行内onclick的写法，可以直接把绑定事件的元素作为参数传入处理函数，不需要依赖事件对象的属性：
修改HTML行内绑定：

<div class="card" onclick="handleCardClick(this)">
    <div class="card__face card__face--front">front</div>
    <div class="card__face card__face--back">back</div>
</div>

修改JS逻辑：

function handleCardClick(cardEl) {
    // 传入的cardEl就是.card元素，直接操作即可
    cardEl.classList.toggle("is-flipped");
}

方案3：从target向上查找目标父元素 #

通过DOM原生的closest方法，从实际点击的元素开始向上查找匹配.card选择器的最近祖先元素，这种写法灵活性最高，哪怕事件绑定在更外层的容器上也能正常工作：

function handleCardClick(e) {
    const cardEl = e.target.closest('.card');
    if (cardEl) {
        cardEl.classList.toggle("is-flipped");
    }
}

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