Bootstrap 5 События указателя взаимодействия

В начальной загрузке 5 Interactions — это служебный класс, который контролирует, как взаимодействуют элементы веб-сайта (как пользователь взаимодействует с ними). События указателя в Interactions поставляются с классами pe-none и pe-auto для предотвращения или добавления взаимодействий элементов. Давайте кратко рассмотрим каждый из них.

Классы событий указателя взаимодействия:

• pe-none: класс pe-none используется для предотвращения взаимодействия элементов. Если вы используете класс pe-none внутри тега привязки, ссылка будет недоступна.
• pe-auto: этот класс помогает добавить взаимодействие с указателем. По сути, это показывает поведение по умолчанию. Например, если вы используете класс pe-auto внутри тега привязки, ссылка может быть легко доступна.

Синтаксис: * можно заменить на none и auto.

<p>
    <a href="" class="pe-*">...</a> 
    ....
</p>

Примеры ниже иллюстрируют события указателя взаимодействия Bootstrap 5:

Пример 1: Следующий пример иллюстрирует использование класса pe-none. В этом примере ссылка будет недоступна для указателей и клавиатур.

Выход:

Пример 2. Класс pe-auto добавит взаимодействия с указателем. Это похоже на поведение по умолчанию любого текста с гиперссылкой. Вы можете попробовать это с помощью приведенного ниже примера.

Выход:

Даже если мы отключим события указателя с помощью pe-none, по умолчанию ссылки по-прежнему могут быть сфокусированы и доступны для пользователей с клавиатурой. Чтобы избежать этого, мы используем нижеприведенные атрибуты вместе с классом pe-none. Это полностью заблокирует взаимодействие пользователей с клавиатурой.

• tabindex=”-1″ : запретить элементам получать фокус клавиатуры.
• aria-disabbled="true" : поделитесь фактом, что они фактически отключены от вспомогательных технологий.

Ссылка : https://getbootstrap.com/docs/5.0/utilities/interactions/#pointer-events