cursor: not-allowed 仅改变鼠标指针样式，不阻止交互；需配合 pointer-events: none 或 disabled 属性等才能真正禁用，且须同步更新 aria-disabled 和 js 状态以保障可访问性与行为一致。
cursor: not-allowed 什么时候生效？
它只改变鼠标指针的视觉样式，**不阻止任何交互行为**——点击、focus、键盘操作照常触发。很多人以为加了 cursor: not-allowed 就等于“禁用”，结果按钮依然能点、表单依然能提交，纯属错觉。
- 必须配合其他手段（如
pointer-events: none或 JS 拦截）才能真正禁用交互 - 对
<input disabled>这类原生禁用元素，cursor: not-allowed通常自动生效，但不是靠它起作用 - 在 Firefox 中，
textarea即使设置了not-allowed，仍可能允许文本选中（需额外加user-select: none）
怎么让 cursor: not-allowed 和真实禁用同步？
最稳妥的做法是把视觉样式和行为控制绑定在一起，避免“看起来不能点，实际能点”的 UX 陷阱：
- 对按钮或自定义组件，统一用
disabled属性 + CSS 类：.btn:disabled { cursor: not-allowed; }，再配合 JS 控制disabled状态 - 对非表单元素（如
<div class="card">），推荐组合写法：<br><pre class="brush:php;toolbar:false;">.card.disabled { cursor: not-allowed; pointer-events: none; }</pre>，其中 <code>pointer-events: none才真正拦截鼠标事件 - 注意：
pointer-events: none会阻止所有鼠标事件（包括子元素），若需保留子元素可点击（比如内部有个图标按钮），得单独给子元素设pointer-events: auto - 父元素设置了
cursor: default或其他值，且未被子元素显式覆盖 - 使用了伪元素（如
::before）遮盖了目标区域，鼠标实际 hover 在伪元素上，而它没设 cursor - 某些框架（如 Ant Design、Element Plus）的组件内部有内联 style 或高优先级 class，强行覆盖了你的
cursor - 移动端 Safari 对
not-allowed支持不稳定，建议测试真机；必要时 fallback 到cursor: default - 别直接监听
click后 return false——这会让屏幕阅读器误判为可交互元素 - 更合理的方式是：状态变更时同步设置
element.setAttribute('aria-disabled', 'true')和element.classList.add('disabled')，再靠 CSS 驱动样式和行为 - 如果用了
pointer-events: none，记得在 JS 中也跳过该元素的逻辑处理，否则用户键盘 tab 过来后按回车，照样触发操作
为什么有时 not-allowed 样式不显示？
常见原因不是语法错，而是层叠或继承干扰：
要不要用 JavaScript 模拟禁用效果？
纯 CSS 能解决大部分场景，但遇到动态条件（比如“当数据未加载完成时禁用”）或需要精细控制事件（如只禁用 click，不禁用 focus），JS 是绕不开的：
cursor: not-allowed，而是确保它出现的时候，背后的状态、语义、行为全是一致的。样式只是表象，别让它骗了你。
