在 react 中，当为父容器绑定 onclick 事件时，子元素的点击会默认触发父元素的事件（事件冒泡）。若只需响应子元素自身点击、且不希望影响父级逻辑，应调用 `e.stoppropagation()` 阻断事件传播。
在你提供的代码中，.event 容器本身是点击目标，但其内部 <p className="date"> 等子元素被点击时，事件会向上冒泡——虽然当前示例中父级 <div className="events-container"> 暂未绑定 onClick，但一旦添加（例如用于全局取消选中或模态框关闭），就会意外触发。因此，关键不是“过滤某个子元素”，而是确保每次点击 .event 时，只作用于该卡片自身逻辑，且不干扰外层结构。
正确做法是在子元素（即 .event 的 onClick 处理函数）中调用 e.stopPropagation()：
<div
key={event.id}
className="event"
onClick={(e) => {
e.stopPropagation(); // ✅ 阻止事件冒泡到任何父级 div
// 推荐使用 e.currentTarget 而非 e.target：
// e.target 是实际点击的元素（可能是 p/h1），而 e.currentTarget 始终是绑定事件的 .event 元素
const date = e.currentTarget.querySelector(".date");
date?.classList.add("selected-event");
// 同时建议同步更新 React state，实现受控行为
setSelectedEvent(event.id);
}}
>
<p className="date">{event.date}</p>
<h1 className="name">{event.name}</h1>
<p className="description">{event.description}</p>
</div>⚠️ 注意事项：
- ❌ 不要使用 e.target.querySelector(...) —— 若用户点击的是 <h1> 或 <p class="description">，e.target 就不是 .event 容器，查询可能失败或返回 null；✅ 应始终用 e.currentTarget（即事件监听器绑定的元素）。
- ✅ stopPropagation() 仅阻止冒泡，不影响同一元素上的其他事件监听器执行，也不阻止默认行为（如链接跳转），如需禁用默认行为请配合 e.preventDefault()。
- ? 若后续需支持“点击空白区域取消选中”，可在父容器（如 .events-cards）上添加 onClick 并检查 e.target === e.currentTarget，从而区分是点击卡片还是卡片外区域。
总结：stopPropagation() 是解决子触发型父事件干扰的核心手段，配合 currentTarget 和状态管理，即可构建健壮、可预测的多选交互逻辑。
