Понимание javascript:void(0) в HTML

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

Содержание

• Что на самом деле делает javascript:void(0)
• Почему разработчики используют этот паттерн
• Безопасность и альтернативы
• Лучшие практики для интерактивных элементов
• Стратегии миграции

Что javascript:void(0) на самом деле делает

Выражение javascript:void(0) combines two JavaScript concepts:

1. Оператор void: Вычисляет переданное ему выражение и возвращает undefined. Это означает, что void(0) вычисляется до undefined без побочных эффектов или значений.

2. Протокол javascript:: Схема URI, которая выполняет JavaScript-код вместо навигации к ресурсу.

Когда вы используете <a href="javascript:void(0)">, вы говорите браузеру выполнить JavaScript-код void(0) вместо выполнения обычного поведения ссылки. Как объясняется на freeCodeCamp, это означает “ничего не делать - не перезагружать, не навигировать, не запускать какой-либо код.”

<!-- Эта ссылка никуда не будет вести -->
<a href="javascript:void(0)" onclick="showLoginModal();">Вход</a>

Почему разработчики используют этот паттерн

Предотвращение поведения навигации по умолчанию

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

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

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

• Модальных диалогов
• Выпадающих меню
• Навигации по вкладкам
• Интерактивных форм
• Динамической загрузки контента

Как объясняется на GeeksforGeeks, “javascript:void(0) позволяет ссылкам выполнять JavaScript без ухода со страницы, что полезно для действий, таких как показ всплывающих окон.”

Общие случаи использования:

• Ссылки входа, открывающие модальные формы
• Пункты меню, запускающие JavaScript-функции
• Интерактивные элементы в одностраничных приложениях
• Элементы, которые должны быть доступны с клавиатуры, но не навигационные

Безопасность и альтернативы

Риски безопасности

Использование javascript:void(0) создает несколько проблем безопасности:

1. Уязвимости XSS: Как отмечено в GitHub issue React, JavaScript-URL могут быть использованы для атак межсайтового скриптинга.

2. Конфликты с политикой безопасности контента: Современные браузеры и фреймворки безопасности часто блокируют javascript: URL по умолчанию.

3. Проблемы доступности: Скринридеры могут не правильно объявлять эти элементы как интерактивные.

Лучшие альтернативы

Согласно Sentry, “Установка значения href ссылки на “” или “#” является лучшей альтернативой” javascript:void(0).

Лучшие практики для интерактивных элементов

Использование семантического HTML

Наиболее семантически правильный подход - использовать подходящие HTML-элементы для их предполагаемого назначения. Как подчеркивается на GeeksforGeeks, “Это злоупотребляет тегом <a>, который предназначен для навигации. Вместо этого используйте <button> для действий.”

Рекомендации современных фреймворков

Современные JavaScript-фреймворки, такие как React, явно не рекомендуют javascript: URL. В GitHub issue React указано, что “React 16.9.0 устаревает javascript: URL” в качестве меры предосторожности.

Вопросы доступности

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

• Были доступны с клавиатуры
• Предоставляли соответствующие ARIA-роли
• Имели четкие состояния фокуса
• Работали со скринридерами

<!-- Лучшая альтернатива: использование элемента button -->
<button id="loginlink" onclick="showLoginModal();">Вход</button>

<!-- Альтернатива: доступная ссылка с правильной ролью -->
<a href="#" role="button" onclick="showLoginModal(); return false;">Вход</a>

Стратегии миграции

Пошаговая миграция

1. Идентификация интерактивных элементов: Найдите все теги <a> с javascript:void(0), которые запускают JavaScript-действия
2. Замена на подходящие элементы: Используйте <button> для действий, <a> для навигации
3. Обновление обработчиков событий: Перенесите с href на соответствующие атрибуты событий
4. Тестирование доступности: Убедитесь в навигации с клавиатуры и совместимости со скринридерами

Пример миграции

До:

<a href="javascript:void(0)" class="btn" onclick="showModal();">Открыть модальное окно</a>

После:

<button class="btn" onclick="showModal();">Открыть модальное окно</button>

Вопросы CSS-стилизации

При замене ссылок на кнопки, возможно, потребуется скорректировать CSS:

/* Сделать кнопку похожей на ссылку */
.btn {
  background: none;
  border: none;
  color: #0066cc;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
  font: inherit;
}

/* Сделать ссылку похожей на кнопку */
.link-button {
  background: #f0f0f0;
  border: 1px solid #ccc;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
}

Заключение

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

Источники

1. Что означает “javascript:void(0)”? - Stack Overflow
2. Понимание выражения javascript:void(0) - DEV Community
3. Что означает javascript:void(0)? - GeeksforGeeks
4. Что на самом деле означает javascript:void(0)? Объяснение - Creative Tim
5. JavaScript Void 0 – Что означает javascript:void(0);? - freeCodeCamp
6. Что означает “javascript:void(0)”? | Sentry
7. Что означает JavaScript Void(0)? - Quackit
8. Что означает javascript:void(0)? · CoreUI
9. Понимание выражения javascript:void(0) - Medium
10. Что означает JavaScript:Void(0)? - freeCodeCamp
11. Ложное предупреждение о предосторожности безопасности (javascript: URLs) · GitHub React Issue
12. Какое значение href следует использовать для пустых JavaScript-ссылок, “#” или “javascript:void(0)”? | Sentry
13. JavaScript - Избегайте “javascript:void(0)” для пустых ссылок - 30 seconds of code
14. Странная особенность с XSS через JavaScript URI - DigiNinja
15. Как разрешить javascript:void(0) для использования в атрибутах HTML-элементов через Content-Security-Policy? - Stack Overflow