javascript:void(0): Полное объяснение и руководство

javascript:void(0) - это URI на JavaScript, используемый в атрибутах href HTML-ссылок, который предотвращает навигацию браузера на новую страницу при клике, позволяя выполнять только JavaScript без перезагрузки страницы или изменения URL. Этот шаблон создает кликабельный элемент, который выглядит как ссылка, но функционирует как кнопка, выполняя пользовательские функции JavaScript и подавляя поведение навигации браузера по умолчанию. Часть void(0) конкретно оценивается как undefined, обеспечивая возврат JavaScript-выражением значения и предотвращение любых непреднамеренных побочных эффектов.

Содержание

• Что такое javascript:void(0)?
• Как это работает
• Распространенные случаи использования
• Альтернативы и лучшие практики
• Критика и проблемы
• Когда использовать

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

javascript:void(0) - это специальная схема URI, используемая в атрибуте href HTML-якорных тегов (<a>), которая указывает браузеру выполнять код JavaScript без выполнения навигации или перезагрузки страницы. Когда пользователь нажимает на ссылку с этим значением href, браузер выполняет указанный код JavaScript (если он есть), но предотвращает поведение ссылки по умолчанию - навигацию на новый URL.

Согласно Mozilla Developer Network, этот шаблон создает эффект “псевдо-кнопки”, когда элемент выглядит как кликабельная ссылка, но на самом деле никуда не переходит в традиционном смысле. Часть void(0) конкретно использует оператор void JavaScript для оценки выражения 0 и возврата undefined, обеспечивая возврат URI JavaScript без значения.

Как это работает

Технический механизм, стоящий за javascript:void(0), включает несколько компонентов:

1. Схема URI JavaScript: Префикс javascript: указывает браузеру рассматривать следующее содержимое как код JavaScript для выполнения.

2. Оператор void: Оператор void в JavaScript оценивает заданное выражение и возвращает undefined. В данном случае void(0) оценивает число 0 и возвращает undefined.

3. Предотвращение навигации: Поскольку URI JavaScript возвращает undefined, у браузера нет URL для навигации, что эффективно предотвращает навигацию по странице.

Как объясняется на GeeksforGeeks, “При размещении в атрибуте href тега <a> он позволяет ссылке выполнять код JavaScript без перезагрузки или изменения текущей страницы. Это особенно полезно для запуска функций JavaScript при предотвращении поведения по умолчанию.”

Базовый поток выполнения:

1. Пользователь нажимает на ссылку
2. Браузер выполняет код JavaScript (если есть)
3. void(0) возвращает undefined
4. Браузер получает undefined как место назначения навигации
5. Навигация не происходит

Распространенные случаи использования

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

1. Создание интерактивных элементов

Наиболее распространенный случай использования - создание интерактивных элементов, которые выглядят как ссылки, но функционируют как кнопки. Например:

<a href="javascript:void(0)" onclick="showLoginModal()">Вход</a>
<a href="javascript:void(0)" onclick="toggleMenu()">Меню</a>
<a href="javascript:void(0)" onclick="submitForm()">Отправить</a>

Согласно DEV Community, “При нажатии функция JavaScript использования javascript:void(0) в качестве значения href предотвращает обновление страницы и изменение URL при нажатии на ссылку.”

2. Одностраничные приложения (SPA)

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

3. Обработка событий

Когда разработчикам нужно обрабатывать события клика на элементах, которые должны вести себя как ссылки, но не навигировать, этот шаблон предоставляет простое решение. Статья на FreeCodeCamp объясняет: “Используя javascript:, вы можете выполнить код, который не изменяет текущую страницу. Используемый вместе с void(0), это означает ничего не делать - не перезагружать, не навигировать, не выполнять какой-либо код.”

4. Заглушки для ссылок

В некоторых случаях разработчики используют этот шаблон для заглушек ссылок, которые будут подключены к реальной функциональности позже в процессе разработки, обеспечивая то, что ссылки не нарушат пользовательский опыт.

Альтернативы и лучшие практики

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

1. Использование элементов кнопок

Семантически правильный подход - использование элементов <button>, стилизованных под ссылки:

<button onclick="showLoginModal()" class="link-style">Вход</button>

Как рекомендует 30 Seconds of Code, “Вы всегда должны рассматривать более семантически подходящие альтернативы, такие как теги <button>, <div> или <span>.”

2. Использование href=“#” с предотвращением события

<a href="#" onclick="event.preventDefault(); showLoginModal();">Вход</a>

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

3. Использование href=“javascript:” без void(0)

<a href="javascript:" onclick="showLoginModal();">Вход</a>

Но этот подход имеет схожие проблемы с javascript:void(0).

4. Использование элементов Span или Div

<span class="clickable" onclick="showLoginModal()">Вход</span>

С соответствующим CSS-стилем для придания вида кликабельности.

5. Использование делегирования событий

Современные JavaScript-фреймворки часто рекомендуют использование делегирования событий и правильной обработки событий вместо встроенного JavaScript:

<a href="#" data-action="login">Вход</a>

С JavaScript:

document.addEventListener('click', function(e) {
  if (e.target.matches('[data-action="login"]')) {
    e.preventDefault();
    showLoginModal();
  }
});

Согласно Stack Overflow, “Ни то, ни другое. Если вы действительно должны использовать ссылку, то используйте span, стилизованный как ссылка. Не беспокойтесь о href.”

Критика и проблемы

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

1. Нарушение семантического HTML

Использование якорных тегов для целей, не связанных с навигацией, нарушает семантическое значение HTML. Согласно Quackit, “Практика использования JavaScript:Void(0) для предотвращения обновления страницы - это быстрое и простое решение, но не обязательно наиболее масштабируемое или доступное решение, и оно не следует принципам ненавязчивого JavaScript.”

2. Проблемы доступности

Когда JavaScript отключен, ссылки с javascript:void(0) не предоставляют функциональности и могут запутать пользователей с программами чтения с экрана или другими вспомогательными технологиями.

3. Нарушения политики безопасности контента (CSP)

Современные политики безопасности часто блокируют URI javascript: по соображениям безопасности. Как отмечается в обсуждении на Stack Overflow, “Javascript:void(0) - это плохая идея и нарушает политику безопасности контента на страницах HTTPS с включенным CSP.”

4. Предупреждения фреймворков

React и другие современные фреймворки часто показывают предупреждения при использовании URI javascript:. Согласно Sentry, “React был передан ‘javascript:void(0)’. React выдает предупреждение для всех javascript: URL, используемых в качестве меры предосторожности безопасности.”

5. Проблемы с кликом средней кнопкой и новой вкладкой

Когда пользователи нажимают средней кнопкой мыши или правой кнопкой и выбирают “Открыть в новой вкладке”, javascript:void(0) может создавать пустые вкладки или нежелательное поведение.

Когда использовать

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

1. Поддержка устаревшего кода

При поддержке существующих кодовых баз, которые уже используют этот шаблон, может быть практично продолжать его использование вместо extensive рефакторинга.

2. Простой прототипинг

Во время быстрого прототипирования javascript:void(0) предоставляет быстрый способ сделать элементы кликабельными без настройки правильных обработчиков событий.

3. Конкретная совместимость с браузерами

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

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

Заключение

javascript:void(0) служит способом создания кликабельных HTML-элементов, которые выполняют JavaScript без вызова навигации по странице. Хотя функционально, это считается устаревшей практикой, которая нарушает принципы семантического HTML и создает проблемы доступности и безопасности. Современная веб-разработка предпочитает использование правильных HTML-элементов, таких как кнопки или стилизованные элементы div/span с правильной обработкой событий. При столкновении с этим шаблоном в существующем коде, рассмотрите возможность рефакторинга его в более поддерживаемые и доступные решения, но понимайте его роль как переходной техники в истории веб-разработки.

Источники

1. Что означает “javascript:void(0)”? - Stack Overflow
2. Понимание оператора javascript:void(0) - DEV Community
3. JavaScript Void 0 – Что означает javascript:void(0);? - FreeCodeCamp
4. Что на самом деле означает Javascript Void(0)? - Creative Tim
5. Что означает javascript:void(0)? - GeeksforGeeks
6. Какое значение href следует использовать для JavaScript-ссылок - Stack Overflow
7. JavaScript - Избегайте “javascript:void(0)” для пустых ссылок - 30 Seconds of Code
8. Какое значение href следует использовать для пустых JavaScript-ссылок - Sentry
9. Следует ли использовать ‘#’ или ‘javascript:void(0);’ в атрибуте href - Our Code World
10. Что означает javascript:void(0)? - Quackit