应使用 btn.disabled 或 hasattribute('disabled') 判断按钮是否禁用，而非 matches(':disabled')；因后者依赖渲染状态、不可靠，且原生禁用按钮默认不触发 click 事件。
直接用 matches 判断被点击按钮是否禁用，关键在于：它只能检查元素是否**当前具有该状态属性或伪类**，而 `
✅ 正确做法：用 hasAttribute('disabled') 或 disabled 属性值判断
这是最可靠、兼容性最好、语义最清晰的方式：
-
event.target.hasAttribute('disabled')→ 检查是否显式写了disabled属性（包括<button disabled></button>或<button disabled></button>） -
event.target.disabled === true→ 检查实际禁用状态（会受 JS 动态设置影响，比如btn.disabled = true后即使没写属性也返回true）
⚠️ matches(':disabled') 不推荐用于此场景
虽然现代浏览器支持 element.matches(':disabled')，但它依赖样式引擎和渲染状态，在事件处理中可能有延迟或不一致，尤其在快速点击、JS 动态修改后未重排时容易误判。而且它无法区分“属性存在”和“逻辑禁用”，可读性和调试性差。
? 实际使用示例
绑定点击事件时这样写：
button.addEventListener('click', function(e) {
const btn = e.target;
if (btn.disabled) {
console.log('按钮已被禁用，不执行操作');
return;
}
// 正常处理逻辑
});
? 补充提醒
- 禁用按钮默认不会触发
click事件（大多数浏览器行为），所以你通常根本收不到它的点击 —— 如果你确实收到了，说明它可能只是视觉上“像禁用”（比如加了opacity: 0.5和pointer-events: none），但并未真正设置disabled属性 - 若需拦截“伪禁用”按钮的点击，应统一用 CSS 类（如
.is-disabled）+btn.matches('.is-disabled')，而非依赖原生disabled
