如何点击父元素时正确触发自身事件而非内部子元素？

这是DOM事件触发时的默认机制：事件目标永远指向点击位置嵌套最深的节点。pointer-events: none 本身不是错误方案，只是适用场景有限，以下是不同场景下的更优实现：

方案1：JS层做事件目标匹配（通用性最高，兼容所有场景） #

不需要修改任何子元素样式，不管点击到卡片内的哪一层子元素，都通过DOM原生的closest()方法向上溯源到绑定事件的卡片节点即可，哪怕卡片内部有独立需要交互的按钮、链接也不会产生冲突。
示例代码：

// 给所有卡片绑定点击事件
document.querySelectorAll('.card').forEach(card => {
  card.addEventListener('click', e => {
    // 向上查找匹配卡片元素，命中后执行业务逻辑
    const currentCard = e.target.closest('.card')
    if (!currentCard) return
    // 此处写卡片点击的业务逻辑，比如跳转、弹出详情等
  })
})

如果你采用事件委托的方式把点击事件绑在卡片的外层容器上，这个写法同样适用。

方案2：CSS伪元素遮罩（无额外JS判断，适合子元素少、交互简单的场景） #

给卡片加一个绝对定位的透明伪元素铺满整个卡片区域，层级设在普通展示子元素之上，所有点击默认会落在这个伪元素上，直接触发卡片绑定的事件。如果卡片内有需要单独响应点击的元素（比如内置的收藏按钮、跳转链接），只需要给这类元素设置比伪元素更高的z-index即可，不需要给其他所有子元素单独加样式。
示例代码：

.card {
  position: relative;
  /* 其余卡片原有样式保持不变 */
}
.card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  /* 无需设置背景，透明层即可正常接收点击事件 */
}
/* 需要独立交互的子元素单独提高层级 */
.card .favorite-btn {
  position: relative;
  z-index: 2;
}

关于当前使用的pointer-events: none方案 #

这个方案本身没有问题，当卡片内部所有子元素都是纯展示用途、没有任何独立交互需求时，它是性能最高、代码量最少的实现，完全不需要替换。只有当卡片内存在需要单独响应点击的元素时，这个方案才会失效，需要换成上述两种方案。

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