不能靠事件捕获阶段在自定义组件中做权限校验，因其仅对click、keydown等原生DOM事件生效，而fetch、localStorage、路由跳转等JS API调用不经过事件流，需通过API劫持、Proxy封装、框架守卫或组件内权限校验实现。
不能靠事件捕获阶段在自定义组件中做权限校验——它只对 click、keydown 等原生 dom 事件生效，而真实业务中的“用户操作”往往不走事件流。
哪些操作根本不受捕获阶段影响
自定义组件里常见的敏感行为，比如点击按钮后触发 fetch 请求、调用 localStorage.setItem、执行 navigator.clipboard.writeText、提交表单、跳转路由、下载文件等，全都不经过 DOM 事件流。它们是纯 JS API 调用，addEventListener 的 useCapture = true 对它们完全无效。
- click 事件能被捕获，但按钮背后的 submit()、fetch()、router.push() 不会自动跟着被捕获
- 即使你在 document 上监听 capture 阶段的 click，也无法知道这次点击最终会调用哪个接口、写入什么数据、跳转到哪一页
- 键盘回车、快捷键（如 Ctrl+S）、脚本直接调用、自动轮播触发的操作，也都绕过 click 事件监听
真正能在操作前拦截的入口只有三类
想抢在逻辑执行前做权限判断，必须从行为源头下手，而不是等事件冒泡或捕获：
- 劫持全局 API：重写 window.fetch、XMLHttpRequest.prototype.send，在请求发出前检查 URL 和权限码
- Proxy 封装存储/剪贴板：用 Proxy 包裹 localStorage.setItem 或重写 navigator.clipboard.writeText，插入同步校验逻辑
- 框架导航守卫：Vue Router 的 beforeEach、React Router 的 useNavigate 拦截、Angular 的 CanActivate，适合页面级或功能入口级预判
自定义组件里该怎么做权限控制
在组件内部，应放弃“靠事件捕获拦操作”的思路，改用更可靠、更贴近业务的方式：
- 按钮渲染时就根据权限码决定是否显示或禁用（如 v-permission="['user:delete']"）
- 按钮点击回调里第一行就校验权限，不满足则提前 return 并提示，不执行后续逻辑
- 对关键副作用操作（如上传、导出、删除）封装成带权限检查的 hook 或 service 方法，而非依赖 DOM 事件时机
- Element Plus / Ant Design 等组件的 before-upload、onConfirm 等钩子，比捕获阶段更早、更可控
前端权限校验的本质不是“拦住点击”，而是“不让非法逻辑执行”。捕获阶段只是个 DOM 机制，别让它误导你去堵错地方。
