当前页按钮仍可点击是因为仅加active类不阻断交互；正确做法是用button[type="button"]配合aria-current="page"并拦截click事件，或用a标签加aria-current="page"和e.preventdefault()。

当前页按钮为什么还能点？

当前页按钮视觉上高亮（active类），但用户仍能点击——这不是 bug，而是你没真正禁用它。Bootstrap 的 active 类只改样式，不阻止交互；它和 disabled 是两回事。当前页按钮必须同时满足两个条件：视觉高亮 + 语义禁用 + 事件阻断。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

• 仅加 class="active"：按钮可聚焦、可回车触发、屏幕阅读器读作“跳转到第3页”，完全没禁用
• 仅加 disabled 属性：语义正确，但 Bootstrap 分页结构里通常用 @#@#@#@#@#@#@#@#@#@0，并在 JS 中 e.preventDefault()，不设 disabled

为什么加了 pointer-events: none 还是能键盘触发？

pointer-events: none 只屏蔽鼠标事件，对键盘（Enter/Space）、屏幕阅读器、表单提交、事件委托完全无效。它只是“视觉遮罩”，不是真正的禁用。

• 键盘用户按 Enter 仍会触发 <button></button> 的 click 事件
• 表单内 <button type="submit"></button> 加了 pointer-events: none，用户按回车依然提交
• 父级监听 click 时，event.target 仍是该按钮，event.target.disabled 为 false，无法靠它过滤
• 真正可靠的方案只有两个：button.disabled = true（对 <button></button>），或 aria-disabled="true" + 手动拦截事件（对 <a></a> 或自定义组件）

当前页的交互边界很窄：它要可聚焦、可读出、不可触发。容易被忽略的是——禁用动作本身不是目的，确保用户感知「这是当前位置」且不会误操作，才是关键。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！