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