Отключаем HREF, если выполнено событие ONCLICK: JavaScript

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

Для предотвращения перехода по ссылке применяйте метод event.preventDefault() в обработчике события onclick:

<a href="https://example.com" onclick="event.preventDefault(); /* Вуаля! */">Нажми здесь</a>

Данный код позволит сработать onclick, но href не выполнится.

Встраивание onclick без href

Если JavaScript недоступен (отключен или не поддерживается браузером), наша ссылка продолжит работать благодаря резервному варианту href. Используйте инлайн-объявление return false:

<a href="https://example.com" onclick="console.log('Клик зарегистрирован, перехода нет!'); return false;">Нажми здесь</a>

При активном JavaScript onclick выполняется и блокирует href с использованием return false. Без JavaScript браузер воспользуется href по умолчанию.

Применение addEventListener

Перейдем к более элегантному методу, позволяющему разделить HTML и JavaScript с использованием addEventListener:

document.querySelector('a').addEventListener('click', function(event) {
    event.preventDefault();  // Сдерживаем действие href
    // Вставьте здесь свой код
});

Такой подход придает коду структурированность и облегчает его поддержку.

Избежание задержки href

Устраните задержку при срабатывании href как ненужное ожидание. Используйте preventDefault() или return false для немедленного прекращения перехода и повышения удобства пользователя.

Учет пользователей без JavaScript

Не забывайте о том, что некоторые пользователи могут не использовать JavaScript. В этом случае href должен организовать надежную работу. Проверьте это, временно отключив JavaScript в браузере.

Управление классами

Для управления несколькими ссылками воспользуйтесь классами. Назначьте определенный класс, например, ignore-click, и установите обработчики для всех элементов с этим классом:

document.querySelectorAll('.ignore-click').forEach(function(element) {
    element.addEventListener('click', function(event) {
        event.preventDefault();  // Отменяем стандартное поведение href 
        // Добавьте здесь больше логики
    });
});

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

Приведем простую инструкцию-схему в форме эмодзи, объясняющую принцип отмены href, используя изображение двери 🚪 и кнопки 🔘:

Стартовая ситуация:
- Дверь 🚪: Открыта (href активен)
- Кнопка 🔘: Не нажата (onclick не выполнен)

Нажимаем кнопку 🔘 (onclick выполнен):
- Дверь 🚪🔒: Закрыта (href отменен)
- Кнопка 🔘✅: Сработала

Итог:
- Дверь 🚪, изначально открытая, теперь закрыта 🔒 после нажатия кнопки 🔘 (онклик)!

Нажали на кнопку 🔘, закрыли дверь 🚪. Всё просто!

JS включен и выключен: Что меняется?

Необходимо учесть сценарии, когда JavaScript включен или выключен. В этих случаях поведение onclick будет адаптироваться:

<a href="https://example.com" onclick="if (determineBehavior()) { event.preventDefault(); } else { /* JS выключен, href работает как обычно */ }">Нажми здесь</a>

Здесь determineBehavior() — это функция, определяющая, должен ли выполняться переход по ссылке.

PHP приходит на помощь

Серверные языки программирования, например, PHP, могут быть использованы для управления поведением href в зависимости от наличия JavaScript, определяемого на сервере или с помощью кукис.

Простота — залог изящества

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

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

1. preventDefault() Event Method — Смотрите материал по отмене действий событий.
2. HTML a href Attribute — Читайте подробнее о работе с атрибутом href.
3. Добавление, удаление и проверка классов — Вот как управлять классами в CSS и JavaScript.
4. Введение в события – изучаем веб-разработку | MDN — Изучите события в JavaScript.
5. Регистрация событий: метод addEventListener() | MDN — Использование метода addEventListener.
6. Установка атрибутов: метод setAttribute() – Web APIs | MDN — Узнайте о динамической установке атрибутов.
7. Удаление атрибутов: метод removeAttribute() – Web APIs | MDN — Вот как удалять href и другие атрибуты из элементов.