Анкор в HTML: выполнение JS функции без перезагрузки

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

Для того, чтобы объединить href для навигации и onclick для выполнения JavaScript-действий, используйте их в одном и том же теге <a>. В зависимости от возвращаемого значения функции в onclick, осуществляется или блокируется переход по ссылке: если возвращается true, переход выполняется, false — переход не происходит. Например:

<a href="https://example.com" onclick="launchScript(); return true;">Посетите сайт Example.com</a>

А для того, чтобы отменить переход после действия onclick, используйте:

<a href="https://example.com" onclick="launchScript(); return false;">Оставайтесь на текущей странице</a>

Где launchScript() — это ваша JavaScript-функция, которая выполняется перед переходом или ответственна за его отмену. Этот метод обеспечивает корректное функционирование при отключённом JavaScript (переход на href).

Использование JavaScript для интерактивной навигации

Обработчики событий — это функции, которые предоставляют более гибкий контроль по сравнению с инлайновым JavaScript. Они могут быть привязаны к событию onclick следующим образом:

document.getElementById('link').addEventListener('click', function(event) {
    launchScript(); // Ваш код
    event.preventDefault(); // Подождите, браузер, не переходите сразу!
    window.location.href = this.getAttribute('href'); // Теперь можно перейти по ссылке
});

Перехват стандартных действий для полного контроля

Отмените стандартное действие с использованием event.preventDefault(). Это предоставит возможность управлять переходом с помощью JavaScript, что особенно актуально, когда используются асинхронные операции или отображение динамического контента.

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

Навигация с использованием JavaScript

Если необходимо после клика переадресовать пользователя на URL, который определяется во время события onclick, window.location.href будет вашим помощником:

function navigateToUrl(url) {
    window.location.href = url;
}

// Далее в вашем коде
navigateToUrl('https://example.com'); // И пусть полетит ваш электронный голубь!

Использование внешних скриптов

Не ограничивайтесь кодом в HTML. Применяйте внешние скрипты для улучшения читаемости и структурированности вашего кода:

<a href="https://example.com" id="link">Переход на Example</a>

// В файле внешнего скрипта
document.getElementById('link').onclick = function() {
    launchScript(); // Ваш код
    return true; // И вперёд, к новым горизонтам!
}

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

В качестве примера представьте кнопку в лифте, которая одновременно отвечает за доставку на определённый этаж (href) и за объявление о прибытии (onclick):

Поступление команд от пульта лифта:
- Этаж 1: Кнопка ➡️ Доставка на первый этаж
- Этаж 2: Кнопка ➡️ Доставка на второй этаж + 🔊 "Мы прибыли на второй этаж"

<a href="#floor2" onclick="announceFloor()">Этаж 2</a>

Суть: Не забывайте, что href — это ваш навигатор, а onclick — ваш путеводитель.

Интеграция с jQuery

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

$('a#link_1').click(function(e) {
    e.preventDefault(); // Остановим переход
    launchScript(); // Выполняем какие-то действия
    window.location.href = this.href; // Затем осуществляем переход
});

С помощью метода .click() jQuery ваш код становится более компактным и оптимальным. Только не забудьте подключить сам jQuery:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

Инлайн JS против внешнего JS: выбор формата

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

Ваши динамически создаваемые ссылки также могут обладать атрибутами href и onclick:

// Создаём новый якорный элемент с нуля
var newLink = document.createElement('a');
newLink.href = 'https://example.com'; // Задаём пункт назначения
newLink.onclick = function() {
    launchScript(); // Выполняем какое-то действие
    return false; // Но переход не осуществляем
};
document.body.appendChild(newLink); // Добавляем элемент на страницу

Не забывайте и про пользовательский опыт: атрибут href важен даже при создании ссылок на лету.

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

1. <a>: The Anchor element – HTML: HyperText Markup Language | MDN — Всё об элементе <a>.
2. HTML a href Attribute — Полное описание атрибута href.
3. addEventListener vs onclick – Stack Overflow — Сравнение методов addEventListener и onclick.
4. HTML DOM Document addEventListener() Method — Справочник по методу addEventListener.
5. Введение в события браузера — Глубокое изучение событий в браузере.
6. Event: preventDefault() method – Web APIs | MDN — Особенности метода preventDefault, ключ к управлению поведением ссылок.
7. click Event | jQuery API Documentation — Обзор метода .click() в контексте jQuery.