Отключение нажатия на ссылку после клика: JS и HTML решение

Быстрый ответ

Чтобы быстро отключить ссылку-якорь, установите в CSS свойство pointer-events: none для блокировки клика, а свойство opacity: 0.6; поможет визуально показать, что ссылка неактивна. Ещё можно применить JavaScript, чтобы полностью блокировать клики помощью выражения onclick="return false;".

<a href="#" style="pointer-events: none; opacity: 0.6;" onclick="return false;">Неактивная ссылка</a>

Такое сочетание свойств позволит одновременно дать визуальный сигнал и прекратить взаимодействие пользователя со ссылкой.

Условное отключение и стилизация ссылок через JavaScript

В реальных условиях часто приходится динамически деактивировать ссылки в зависимости от конкретных условий или событий. В таком случае на помощь приходит JavaScript, давая возможность менять поведение ссылок в реальном времени.

Динамическое добавление CSS-классов

В зависимости от выполнения условия добавляется класс disabled. Вот пример кода:

document.querySelector('#my-link').addEventListener('click', function(event) {
  if (shouldBeDisabled) {
    this.classList.add('disabled');
    event.preventDefault();
  }
});

Подробнее об этом расскажет наш спикер на видео

Динамическое удаление атрибута href

В случае, когда есть необходимость полностью заблокировать доступ к ссылке:

if (shouldBeDisabled) {
  document.querySelector('#my-link').removeAttribute('href');
}

Мгновенная обратная связь при действиях пользователя

Если ссылка деактивирована из-за действий пользователя, целесообразно предоставлять немедленную обратную связь:

if (!isUserLoggedIn) {
  alert('Пожалуйста, авторизуйтесь, чтобы получить доступ к этой функции.');
}

Пользовательский интерфейс будет комфортнее, если обратная связь будет адаптирована под специфку действий пользователя.

Визуализация

Вот основы:

[🚪] – Можно нажать (активная ссылка)

Теперь сделайте ее неактивной:

🚧 [🚪] – Нажать невозможно (неактивная ссылка)

Основная идея: Барьер перед дверью и деактивация ссылки имеют одно и то же значение — в обоих случаях нет возможности продолжить движение.

a.disabled {
  pointer-events: none; /* дверь закрыта */
  color: grey;         /* цвет соответствующий состоянию */
}

До: Кликни по мне! После: 🚧 Проход закрыт, здесь нечего смотреть.

Стилизация неактивных ссылок с помощью CSS

Визуальное оформление играет ключевую роль, поэтому рассмотрим разные методы стилизации неактивных ссылок:

Разность цвета и оформления

a.disabled {
  color: #999; // Серый цвет как символ неактивности
  cursor: default; // Стандартный курсор, указывающий на отсутствие действия
  text-decoration: none; // Без подчеркивания
}

Стиль, соответствующий состоянию пользователя

Стилизация ссылок может динамически меняться в зависимости от состояния пользователя, например, "авторизован" или "не авторизован":

a.not-logged-in {
  color: #999;
  pointer-events: none; // Без возможности взаимодействия
}

a.no-permission {
  color: #999;
  text-decoration: line-through; // Обозначение запрета
  pointer-events: none;
}

Адаптивный дизайн

Следует подстроить стили под сенсорные устройства и компьютеры. Для сенсорных устройств необходимо увеличивать размер и видимость ссылок, а для компьютеров важна ясная реакция на наведение курсора мыши.

Совместимость с браузерами и доступность

При использовании pointer-events необходимо учесть совместимость с разными браузерами. Рекомендуется изучить ресурс Can I use, чтобы проверить поддержку этого свойства.

Доступность тоже важна: скрин-ридеры могут воспринимать неактивные ссылки, как активные. Эту проблему решает добавление атрибута aria-disabled="true":

<a href="..." class="disabled" aria-disabled="true">Неактивная ссылка</a>

Важно, чтобы доступность и отзывчивость были корректно реализованы с помощью вспомогательных технологий.

Особые соображения для приложений

Иногда простая CSS-стилизация с помощью pointer-events недостаточна. Более глубокий контроль можно достичь через условную логику:

• Роли пользователей: администратор в отличии от обычного пользователя
• Статус товара в онлайн-магазине
• Переключатели функций: включение или отключение функций приложения

Полезные материалы

1. <a>: Элемент якоря – HTML: Язык разметки гипертекста | MDN — подробная информация об элементе HTML-тега <a>.
2. pointer-events | CSS-Tricks — статья о том, как CSS pointer-events влияют на взаимодействие с элементом.
3. html – Как отключить ссылку с помощью только CSS – Stack Overflow — обсуждение способов деактивации ссылок при использовании только CSS.
4. Атрибут href элемента HTML a — подробное объяснение работы атрибута href якорного элемента.
5. Свойство pointer-events CSS — руководство W3Schools по свойству pointer-events в CSS.
6. Метод EventTarget: addEventListener() – Веб-API | MDN — детальное руководство по использованию JavaScript слушателей событий.