指针事件 · Bootstrap 6.0 中文文档

类名	样式
.pe-none	pointer-events: none;
.pe-auto	pointer-events: auto;

概览

Bootstrap 提供 .pe-none 和 .pe-auto 类，通过 pointer-events CSS 属性来阻止或添加元素交互。

基本用法

此链接无法点击。

此链接可以被点击（这是默认行为）。

此链接无法点击，因为 pointer-events 属性是从其父项继承的。然而，这个链接有一个 pe-auto 类并且可以被点击。

HTML

<p><a href="#" class="pe-none" tabindex="-1" aria-disabled="true">This link</a> can not be clicked.</p>
<p><a href="#" class="pe-auto">This link</a> can be clicked (this is default behavior).</p>
<p class="pe-none"><a href="#" tabindex="-1" aria-disabled="true">This link</a> can not be clicked because the <code>pointer-events</code> property is inherited from its parent. However, <a href="#" class="pe-auto">this link</a> has a <code>pe-auto</code> class and can be clicked.</p>

重要注意事项

.pe-none 类（以及它设置的 pointer-events CSS 属性）只会阻止与指针（鼠标、手写笔、触摸）的交互。默认情况下，带有 .pe-none 的链接和控件仍然可以通过键盘被聚焦和操作。

为了确保即使是键盘用户也能完全中和，你可能需要添加其他属性，例如：

tabindex="-1"（防止他们接收键盘焦点）
aria-disabled="true"（传达他们实际上被辅助技术禁用的事实）
JavaScript 完全阻止他们作

更好的替代方案

如果可能，较简单的解决方案是：

对于表单控件：添加 disabled HTML 属性
对于链接：移除 href 属性，使其成为非交互式锚点或占位链接

无障碍警告：使用 pointer-events: none 可能会造成无障碍障碍。始终确保禁用的元素已使用适当的 ARIA 属性正确标记，并且键盘用户无法意外聚焦它们。

使用案例

.pe-none - 禁用覆盖层、加载状态或暂时禁用元素的交互
.pe-auto - 当父元素有 pe-none 时重新启用子元素的交互

CSS

Sass 工具 API

指针事件工具在我们的工具 API 中的 scss/_utilities.scss 声明。了解如何使用工具 API。

scss/_utilities.scss

"pointer-events": (
  property: pointer-events,
  class: pe,
  values: none auto,
),