VovanR
@VovanR
Фронт-энд Вэб-разработчик

Что использовать вместо href="#"?

Частенько элементы управления верстаются с помощью HTML тэга a.

Это дает несколько преимуществ:
  • если JavaScript отключен, то сработает переход по ссылке, если она задана
  • Работает навигация по контролам с помощью клавиши Tab
  • Работает событие click по нажатию на Enter, когда ссылка в фокусе

Минусы:
  • Постоянно добавлять preventDefault
  • При наведении на такую ссылку браузер внизу показывает адрес, даже если он не указан

Вот накидал небольшой тест: jsfiddle.net/VovanR/omt6am8z

Чтобы решить вопрос навигации и показа адреса ссылки, можно заменить тэг на span с атрибутом tabindex="0". Но событие click по нажатию на Enter так и не заработает. Пойдем дальше и заменим тэг на button. Теперь все почти идеально. За исключением того, что этот тэг сложнее всего стилизовать, особенно если используются глобальные стили.

Какие есть лучшие практики?
  • Вопрос задан
  • 3895 просмотров
Решения вопроса 1
VovanR
@VovanR Автор вопроса
Фронт-энд Вэб-разработчик
Написал небольшую статью, по которой можно выбрать что использовать, а от чего лучше отказаться. Как не использовать a(href="#")
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 3
SerzN1
@SerzN1
Challenge me!
Можно убрать атрибут ссылки и делов то. Кто мешает написать я кнопка. А вообще это бред. Не нужно менять семантику на хитрожопые штуки непонятного содержания. Ссылка должна оставаться ссылкой, если это пустой элемент управления то просто взять span.
Ответ написан
@Tashiro
a href="javascript:void(0)" ?
Ответ написан
Можно сделать href="" - ведёт себя как обычная ссылка, при наведении показывает адрес текущей страницы. Но добавлять preventDefault всё равно придётся.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы