Отключаем 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
было наглядным и простым, а также не забывайте о принципах доступности. В конце концов, нам всем нужно думать о всех пользователях, верно?
Полезные материалы
- preventDefault() Event Method — Смотрите материал по отмене действий событий.
- HTML a href Attribute — Читайте подробнее о работе с атрибутом href.
- Добавление, удаление и проверка классов — Вот как управлять классами в CSS и JavaScript.
- Введение в события – изучаем веб-разработку | MDN — Изучите события в JavaScript.
- Регистрация событий: метод addEventListener() | MDN — Использование метода addEventListener.
- Установка атрибутов: метод setAttribute() – Web APIs | MDN — Узнайте о динамической установке атрибутов.
- Удаление атрибутов: метод removeAttribute() – Web APIs | MDN — Вот как удалять href и другие атрибуты из элементов.