css modules 中不能用 event.target.matches('.btn') 判断，因编译后类名已哈希化；应改用 data-* 属性、结构特征（如 tagname + closest）或 styles 对象导出的类名进行匹配。
这个问题很实际：CSS Modules 把 .btn 编译成类似 Button_btn__Kx2f1 这样的哈希类名，而你在 JavaScript 里用 event.target.matches('.btn') 去判断，自然永远返回 false——因为真实 DOM 上根本没有 .btn 这个类，只有哈希后的那一长串。
别在 JS 里硬写原始类名做 matches 判断
这是最常见也最容易踩的坑。CSS Modules 的隔离机制决定了：你写在 CSS 文件里的类名，只是开发时的“代号”，运行时并不存在。JS 无法靠字符串字面量去匹配一个根本没生成的类名。
- ❌ 错误写法：
if (event.target.matches('.delete-btn')) { ... } - ✅ 正确思路：改用数据属性、结构特征或提前存引用
用 data-* 属性替代 class 名做事件识别
给动态元素打上语义清晰、不参与样式的标记，既稳定又解耦。CSS Modules 不影响 data- 属性，且它天然支持选择器匹配。
- 渲染时加属性：
<button data-action="delete" data-id="123">删</button> - 委托中判断：
if (event.target.matches('[data-action="delete"]')) { ... } - 优势：不依赖类名编译结果，可读性强，支持 SSR 和服务端生成
利用父容器结构 + tagName 或其他稳定特征
如果目标元素类型固定（比如全是 <button></button>），且行为由位置或上下文决定，可以直接跳过类名，靠层级和标签判断。
- 例如所有操作按钮都在
.action-cell内：if (event.target.tagName === 'BUTTON' && event.target.closest('.action-cell')) { ... } - 注意：
closest()查找的是祖先，不是子元素；确保父容器本身有稳定、非哈希化的标识（如 ID、全局类、或用:global()显式声明）
在组件挂载/渲染后，把哈希类名“导出”给 JS 使用
如果你确实需要按类名识别（比如兼容旧逻辑或第三方库），可以在组件内把 styles 对象暴露出来，让 JS 动态构造选择器。
- 导入时保留映射：
import styles from './List.module.css'; - 委托监听中用：
if (event.target.classList.contains(styles.deleteBtn)) { ... } - 或构建选择器：
event.target.matches(`.${styles.deleteBtn}`) - 注意：这种方式要求事件委托绑定必须在 styles 可用之后执行（如 useEffect 或 componentDidMount）
本质上，这不是 CSS Modules 的缺陷，而是提醒我们：当样式被模块化后，JS 和 CSS 就不该再靠“碰巧同名”的字符串耦合。用数据驱动识别，比靠命名约定更可靠。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
