Как не использовать a(href="#")
Решил разобраться чем заменить HTML тэг a при верстке контролов, которые программируются яваскриптом.
Тесты всех вариантов, описанных ниже: jsfiddle.net/VovanR/omt6am8z/
Рассмотрим что можно использовать, а от чего лучше отказаться:
a(href="link_anywhere")
Для обеспечения перехода к странице по ссылке, если отключен JavaScript.
Пример №1: ссылка авторизации a(href="/login/") — открывает форму авторизации, а если JavaScript отключен, то осуществляет переходит на страницу авторизации.
Пример №2: ссылка a(href="#anchor-page-header") — анимация скроллинга к началу страницы. Без JavaScript происходит перемещение к началу страницы, если шапке сайта задан id="anchor-page-header" или там создан якорь a(name="anchor-page-header").
a(href="#")
Не использовать.
a(href="javascript:void(0)")
Использовать только для букмарклетов.
Например букмарклет для перехода на главную страницу:
<a href="javascript:window.location.href=window.location.protocol+'//'+window.location.host;void(0);" title="На главную">Index</a>a(href="") или a(href)
Не использовать.
a
Не использовать.
Равносильно span.
span
Использовать, если не нужна навигация клавишей Tab или с помощью плагина VimFx.
span(tabindex="0")
Использовать.
button(type="button")
Использовать.
Таблица возможностей
a(href="link_anywhere") |
a(href="#") |
a(href="javascript:void(0)") |
a(href="") и a(href) |
a |
span |
span(tabindex="0") |
button(type="button") |
|
|---|---|---|---|---|---|---|---|---|
Не нужет preventDefault |
✗ | ✗ | ✓ | ✗ | ✓ | ✓ | ✓ | ✓ |
| Навигация по Tab | ✓ | ✓ | ✓ | ✓ | ✗ | ✗ | ✓ | ✓ |
| Вызов по Enter | ✓ | ✓ | ✓ | ✓ | ✗ | ✗ | ✗ | ✓ |
| Вызов по Space | ✗ | ✗ | ✗ | ✗ | ✗ | ✗ | ✗ | ✓ |
| При отключенном JavaScript | ✓ | - | - | - | - | - | - | - |
| Нет URL при наведении | ✗ | ✗ | ✗ | ✗ | ✓ | ✓ | ✓ | ✓ |