标签：Interactions Bootstrap 学习 点击 选中 user pe class select

学习 Bootstrap 5 之 交互

• Interactions
• • 1. 网页文本选择 (Text selection)
  • • (1). 全部选中 class = "user-select-all
    • (2). 按词选中 class="user-select-auto" (默认)
    • (3). 不可选中 class="user-select-none"
  • 2. 鼠标指针事件 (Pointer events)
  • • 注意
    • 简单处理

Interactions

Bootstrap 5 官方文档
用户如何与网页内容交互

1. 网页文本选择 (Text selection)

(1). 全部选中 class = "user-select-all

(2). 按词选中 class=“user-select-auto” (默认)

(3). 不可选中 class=“user-select-none”

<p class="user-select-all">全部选中</p>
<p class="user-select-auto">按词选中</p>
<p class="user-select-none">不可选中</p>

2. 鼠标指针事件 (Pointer events)

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

  <p><a href="#" class="pe-none" tabindex="-1" aria-disabled="true">这个链接</a>不能被点击跳转</p>
  <p><a href="#" class="pe-auto">这个链接</a> 点击可以跳转 (默认方式)</p>
  <p class="pe-none"><a href="#" tabindex="-1" aria-disabled="true">这个链接</a>不能被点击, 因为它的<code>pointer-events</code>属性继承自父元素<a href="#" class="pe-auto">这个链接</a>拥有<code>pe-auto</code>类, 所有可以点击跳转</p>

默认情况下, 超链接是可以点击的, 如果父类元素设置了不可点击属性, 则超链接是不可点击的

注意

  .pe-none类只能阻止鼠标、手写笔点击、触摸点击的交互, 默认情况下, 带有.pe-none类的链接和控件对键盘用户来说仍然是可聚焦的和可操作的, 为了确保对这些用户依然是不可交互的, 你需要添加更多的属性, 例如 tabindex="-1" (用来防止接收键盘焦点) 和 aria-disabled=“true” (用来方式使用辅助技术)

简单处理

1. 对于表单控件, 添加 disabled html属性
2. 对于超链接, 移除href属性

标签：Interactions,Bootstrap,学习,点击,选中,user,pe,class,select
来源： https://blog.csdn.net/qq_37354060/article/details/122554761

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。