Работа с атрибутами href и onClick в HTML: порядок выполнения

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

Чтобы активировать функцию JavaScript без перехода по ссылке, необходимо объединить атрибут href с обработчиком событий onclick, предотвращая при этом действие по умолчанию. Для этого используйте event.preventDefault() внутри функции onclick или возвращайте false в атрибуте onclick. Вот пример:

<a href="http://example.com" onclick="event.preventDefault(); doSomething();">Нажми меня</a>

<script>
function doSomething() {
    // Действия, которые выполняются при клике
    alert('Кнопка нажата!');
}
</script>

Такой подход гарантирует выполнение только вашего кода на JavaScript, предотвращая при этом переход по ссылке.

Лучшие практики: работа с onclick и href

Золотое правило: не используйте JavaScript прямо в HTML

Хотя встраивание JavaScript в HTML-теги выглядит удобным, такой подход часто подвергается критике за отсутствие структурности. Для улучшения читаемости и контролируемости кода рекомендуется использовать привязку события click к элементу <a> с помощью методов document.querySelector или document.getElementById:

document.addEventListener('DOMContentLoaded', (event) => {
    document.querySelector('a#myLink').addEventListener('click', (e) => {
        e.preventDefault();
        doSomething();
    });
});

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

Вопрос выбора: <a> vs <button>

Если переход на другую страницу по клику не предполагается, рассмотрите возможность использования тега <button>, который можно стилизовать под ссылку для сохранения непрерывности пользовательского опыта:

<button onclick="doSomething()" class="link-button">Нажми меня</button>

Стилизация тега <button> под <a> выполняется при помощи CSS.

Ручное управление навигацией: использование href после onclick

Можно задать выполнение кода в onclick перед переходом по href, управляя window.location:

<a href="http://example.com" onclick="doCustomLogicFirst(event);">Нажми меня</a>

<script>
function doCustomLogicFirst(event) {
    event.preventDefault();
    console.log('Сначала выполняем определённую логику, а затем делаем переход.');
    window.location.href = event.target.href;
}
</script>

Это позволяет контролировать последовательность выполнения действий: сначала выполнение пользовательской логики, а затем переход по ссылке.

Упрощение работы с помощью jQuery

При использовании jQuery управление кликами становится ещё проще:

$('a#myLink').on('click', function(e) {
    e.preventDefault();
    // Ваш код здесь
});

jQuery облегчает работу с событиями.

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

Можно сравнить элемент <a> с консьержом (🎩):

| Задача   | Метод              |
| -------- | ------------------ |
| 🚶 Вести  | href="destination" |
| 🎩 Помочь | onclick="function()"          |

Консьерж способен провести (с помощью href) или помочь, а затем провести (с помощью onclick).

🎩🚶 -> Ведёт к: destination
🎩🎩 -> Сначала помогает с: function(), затем ведёт

Таким образом, <a> может выполнять двойную функцию, облегчая взаимодействие пользователя с сайтом.

На все случаи жизни: обработка особых случаев

Разбор использования "#"

При использовании href="#" нужно быть внимательным, так как это может вызвать нежелательную прокрутку страницы к её началу. Не забудьте предотвратить стандартное поведение:

<a href="#" onclick="event.preventDefault(); doSomething();">Нажми меня</a>

Приоритет у доступности: пустые href

Ссылки с пустым значением href, такие как href="#" или href="javascript:void(0)", могут привести к непониманию со стороны программ для чтения с экрана и пользователей. Лучше использовать <button> для действий, не связанных с переходом по ссылке, в интересах доступности.

Следите за обновлениями <a>

Обратите внимание на лучшие практики использования элементов <a> и событий onClick, чтобы ваш HTML был актуальным и соответствовал текущим трендам.

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

1. <a>: Элемент якоря – HTML: язык гипертекстовой разметки | MDN — подробно о HTML-элементе-якоре и его атрибутах.
2. Делегирование событий — основы делегирования событий в JavaScript, важного подхода к управлению событиями.
3. Метод события preventDefault() — preventDefault(), необходимый для управления событиями в JavaScript.
4. javascript – Почему использование onClick() в HTML — это плохая практика? – Stack Overflow — о том, почему onClick может быть не лучшим выбором.
5. ARIA: роль кнопки – Доступность | MDN — о важности доступности и правильном использовании onClick.