JavaScript: Что такое javascript:void(0)?

javascript:void(0) — это синтаксическая конструкция, которую традиционно использовали в атрибуте href HTML‑ссылок для предотвращения перехода по умолчанию.

Пример:

ВыделитьHTML

<a href="javascript:void(0)" onclick="doSomething()">Кликни меня</a>

При клике браузер выполняет JavaScript‑код, но void(0) возвращает undefined, что принудительно отменяет навигацию (переход на другую страницу).

Как это работает на практике

Браузер видит href="javascript:..." и интерпретирует содержимое как JS‑код.
void(0) вычисляется в undefined.
Поскольку возвращаемое значение не является валидным URL, переход блокируется.

Почему этот подход считается устаревшим

Несмотря на работоспособность, javascript:void(0) имеет критические недостатки:

Проблемы с доступностью (a11y)

Скринридеры озвучивают javascript:void(0) как текст ссылки, создавая путаницу.
Клавиатурная навигация (Tab) работает некорректно.
Нарушается принцип семантической разметки.

SEO‑риски

Поисковые роботы игнорируют ссылки с javascript:.
Может расцениваться как признак некачественного кода.

Поддержка кода

Смешение HTML и JS в одном атрибуте усложняет рефакторинг.
Трудно тестировать и отлаживать.

Безопасность

В некоторых контекстах может провоцировать XSS‑уязвимости.
Блокировщики рекламы и расширения могут отключать такие ссылки.

UX‑нюансы

Не меняется статус посещённой ссылки (:visited).
Возможны неожиданные прокрутки страницы.

Современные альтернативы

Используйте <button> для действий без навигации
Если ссылка нужна только для запуска JS‑кода — замените её на кнопку:

ВыделитьHTML

<button type="button" onclick="doSomething()">
    Кликни меня
</button>

Почему лучше:

Семантически верно (кнопка для действий, ссылка для навигации).
Нативная поддержка клавиатуры и скринридеров.
Не требует javascript:void(0).

Для ссылок с JS‑логикой: event.preventDefault()
Если нужно сохранить <a> (например, для SEO), используйте:

ВыделитьHTML

<a href="#" onclick="event.preventDefault(); doSomething();">
    Кликни меня
</a>

Лучший подход: отдельный JavaScript
Вынесите логику в скрипт:

ВыделитьHTML

<a href="#" id="actionLink">Кликни меня</a>

ВыделитьJavaScript

document.getElementById('actionLink').addEventListener('click', function(e) {
    e.preventDefault();
    doSomething();
});

Преимущества:

Чистое разделение HTML и JS.
Легче тестировать.
Проще поддерживать.

Альтернатива: data‑атрибуты
Для динамических элементов:

ВыделитьHTML

<button data-action="toggleMenu">Меню</button>

ВыделитьJavaScript

document.querySelectorAll('[data-action]').forEach(el => {
    el.addEventListener('click', handleAction);
});

Когда javascript:void(0) можно оставить

Только в исключительных случаях:

Legacy‑код, который нельзя переписать.
Временное решение при срочном исправлении.
Если другие варианты технически невозможны (крайне редко).

Пример: Исправленная реализация

Было (устаревший подход):

ВыделитьHTML

<a href="javascript:void(0)" onclick="changeColor()">Изменить цвет</a>

Стало (современный подход):

ВыделитьHTML

<!-- Вариант 1: кнопка -->
<button type="button" onclick="changeColor()">Изменить цвет</button>

<!-- Вариант 2: ссылка с отдельным JS -->
<a href="#" id="colorChangeLink">Изменить цвет</a>

<script>
document.getElementById('colorChangeLink').addEventListener('click', function(e) {
    e.preventDefault();
    changeColor();
});
</script>

Заключение

javascript:void(0) — устаревшая практика, которую стоит избегать в новых проектах. Её использование:

Нарушает принципы семантической разметки.
Ухудшает доступность и SEO.
Осложняет поддержку кода.

Современные рекомендации

Для действий без перехода — <button>.
Для ссылок с JS — event.preventDefault().
Логику — в отдельные JS‑файлы.
Тестируйте доступность (Lighthouse, WAVE).

Итог

Если вам нужно заблокировать переход — используйте event.preventDefault(). Если действие не требует навигации — выбирайте <button>. Это сделает ваш код чище, доступнее и проще в поддержке.

Справочник JavaScript