交互

更改用户与网站内容交互方式的实用程序类。

文本选择

更改用户与其交互时选择内容的方式。

用户单击时，此段落将被全部选中。

此段落具有默认选择行为。

用户单击时，此段落不可选择。

html

<p class="user-select-all">This paragraph will be entirely selected when clicked by the user.</p>
<p class="user-select-auto">This paragraph has default select behavior.</p>
<p class="user-select-none">This paragraph will not be selectable when clicked by the user.</p>

指针事件

Bootstrap 提供了 .pe-none 和 .pe-auto 类来阻止或添加元素交互。

此链接无法单击。

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

此链接无法单击，因为 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 属性，使其成为非交互式锚点或占位符链接。

CSS

Sass 实用程序 API

交互实用程序在 scss/_utilities.scss 中的实用程序 API 中声明。了解如何使用实用程序 API。

scss/_utilities.scss

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