直接用e.target.matches()判断工具栏按钮状态常失效，因点击图标、文字或padding时e.target非按钮本身；应改用e.target.closest()定位容器后再用matches()校验。
为什么直接用 e.target.matches() 判断工具栏按钮状态经常失效
因为点击按钮内部图标、文字或 padding 区域时，e.target 往往是 svg、span 或 textNode，而不是按钮本身。此时 e.target.matches('.toolbar-btn[data-action="bold"]') 必然返回 false，哪怕语义上这次点击就该触发加粗逻辑。
常见表现：点 toolbar 里带图标的「加粗」按钮没反应；点「列表」按钮右侧的下拉箭头，状态不更新；鼠标悬停在按钮边缘却无法激活高亮。
- 误以为
matches()能“向上匹配”，其实它只作用于调用它的那个元素实例 - 把
matches()当成事件目标查找工具，但它只返回布尔值，不能替代closest() - 忽略空值判断，对
null或undefined调用matches()直接抛DOMException
e.target.closest() + matches() 是编辑器工具栏的标准组合拳
工具栏按钮通常结构嵌套深（比如 button > svg + span），必须先定位语义容器，再校验状态。这不是取舍，而是固定流程。
- 第一步：用
closest()锁定可交互单元，例如e.target.closest('.toolbar-btn, [data-toolbar-action]') - 第二步：拿到结果后立刻判空，再用
matches()做复合条件判断，如btn.matches('[data-action="italic"]:not([disabled]):not([data-pending])') - 第三步：避免在伪类上做运行时判断——
:hover和:focus在matches()中永远静态为false，需改用document.activeElement === btn或监听focusin
示例：
toolbar.addEventListener('click', (e) => {
const btn = e.target.closest('.toolbar-btn');
if (!btn || !btn.matches('[data-action]:not([disabled])')) return;
handleToolbarAction(btn.dataset.action, btn);
});
动态拼接选择器时最容易踩的三个坑
工具栏常需根据用户配置动态生成按钮或切换状态，此时拼接选择器极易出错。
- 变量为空或
undefined：若actionType = undefined，btn.matches(`[data-action="${actionType}"]`)变成[data-action="undefined"]，语法合法但语义错误 - 属性值含双引号：比如
data-id='item-"abc"'，必须写成btn.matches("[data-id='item-\"abc\"']")，否则解析失败 - 误用伪类做状态判断：写
btn.matches(':enabled')看似简洁，但contenteditable区域内按钮可能被 CSSpointer-events: none禁用，而:enabled不感知该样式，应改用!btn.hasAttribute('disabled') && getComputedStyle(btn).pointerEvents !== 'none'
别把 matches() 当批量筛选工具用
编辑器初始化时想批量激活已启用的按钮？别遍历所有节点再逐个调用 matches()——性能差且易漏状态。
- 正确做法：用
toolbar.querySelectorAll('.toolbar-btn:not([disabled])')一次性获取全部可用按钮，再统一绑定或设置 class -
matches()只适合单元素条件校验，比如事件回调里判断“这次点击是否落在有效按钮上” - 如果真要对一组节点做复杂筛选（如排除某类 data-status 的按钮），用
Array.from(toolbar.children).filter(el => el.matches('.toolbar-btn[data-action]:not([data-status="pending"])'))，但注意children不包含深层嵌套项
真正难处理的不是语法，而是编辑器里那些看不见的状态：光标焦点落在 textNode 上导致 :focus 失效，contenteditable 内部 disabled 属性不生效，CSS visibility: hidden 却仍能被 matches() 匹配到——这些都得靠额外判断补位，不能全指望选择器。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
