javascript:void(0) как убрать: почему ссылка не открывается и что поставить вместо

javascript:void(0) в ссылке означает: выполнить JavaScript-выражение и вернуть undefined, чтобы браузер никуда не переходил. Поэтому такая ссылка часто «не открывается» не из-за ошибки браузера, а потому что ей специально запретили переход

Пример:

<a href="javascript:void(0)">Открыть</a>

Если вы хотите обычную ссылку, замените javascript:void(0) на нормальный адрес:

<a href="/catalog/">Открыть каталог</a>

Если это кнопка действия, используйте <button>, а не пустую ссылку

Почему раньше так писали

javascript:void(0) часто ставили, когда нужен был кликабельный элемент без перехода по адресу. Например, открыть меню, модальное окно или выпадающий список

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

Если это должна быть ссылка

Плохо:

<a href="javascript:void(0)">Подробнее</a>

Хорошо:

<a href="/about/">Подробнее</a>

Ссылка должна вести на страницу. Если адреса пока нет, лучше не делать фальшивую ссылку в готовой верстке

Если это должна быть кнопка

Плохо:

<a href="javascript:void(0)" id="open-menu">Меню</a>

Лучше:

<button id="open-menu" type="button">Меню</button>

JavaScript:

const button = document.querySelector("#open-menu");
const menu = document.querySelector("#menu");

button.addEventListener("click", () => {
  menu.classList.toggle("is-open");
});

Кнопка честно говорит браузеру и пользователю: это действие, а не переход на другую страницу

Если ссылка должна запускать JS и не прыгать наверх

Иногда в старом коде вместо javascript:void(0) используют href="#". Это тоже не идеально: страница может прыгнуть к началу

Если вы поддерживаете старую разметку, можно временно остановить переход:

<a href="#" id="open-popup">Открыть окно</a>

const link = document.querySelector("#open-popup");

link.addEventListener("click", (event) => {
  event.preventDefault();
  console.log("Открываем окно");
});

Но если элемент не ведет на другую страницу, лучше все равно заменить его на кнопку

Что делать пользователю сайта

Если вы не разработчик, а просто видите javascript:void(0) при наведении на ссылку, попробуйте:

• обновить страницу;
• отключить блокировщик скриптов для сайта;
• открыть сайт в другом браузере;
• проверить, включен ли JavaScript;
• очистить кэш сайта.

Если ссылка все равно не работает, вероятно, ошибка в самом сайте

Частые ошибки разработчика

Вешать click на элемент, которого еще нет

Подключайте скрипт с defer или ставьте <script> в конец body

<script src="script.js" defer></script>

Использовать ссылку вместо кнопки

Если элемент не ведет по адресу, это почти всегда кнопка

Оставлять href пустым

Пустой href может привести к перезагрузке текущей страницы. Лучше использовать правильный адрес, button или обработчик с preventDefault

Как найти javascript:void(0) в проекте

Если вы правите свой сайт, найдите такие ссылки поиском по проекту:

javascript:void(0)

Проверьте каждое место и решите, что это должно быть:

Если вы оставляете ссылку только ради CSS-стиля, это сигнал переделать стили под кнопку

Пример доступной кнопки для меню

Вместо ссылки-заглушки:

<a href="javascript:void(0)" id="menu-button">Меню</a>

Сделайте кнопку:

<button id="menu-button" type="button" aria-expanded="false">
  Меню
</button>

<nav id="menu" hidden>
  <a href="/about/">О нас</a>
  <a href="/contacts/">Контакты</a>
</nav>

JavaScript:

const button = document.querySelector("#menu-button");
const menu = document.querySelector("#menu");

button.addEventListener("click", () => {
  const isOpen = button.getAttribute("aria-expanded") === "true";

  button.setAttribute("aria-expanded", String(!isOpen));
  menu.hidden = isOpen;
});

Так элемент будет понятнее не только браузеру, но и пользователям с клавиатурой и скринридером

Когда javascript:void(0) можно не трогать сразу

Если это старый проект и ссылка работает как часть большого виджета, не меняйте все механически. Сначала проверьте, какой JavaScript привязан к клику. Иногда замена на button требует поправить CSS и обработчики

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

Что почитать дальше по JavaScript

Если нужен общий маршрут по теме, откройте рубрику JavaScript. Для соседних задач пригодятся эти разборы:

• javascript:void(0): что это и почему ссылка не открывается
• A JavaScript error occurred in the main process: как исправить
• A JavaScript error occurred in the main process: причины и исправление
• If else в JavaScript: условия на живых примерах