В защиту javascript:void(0);

в 15:09, , рубрики: usability

Намедни я решил посмотреть новости через Google. Нажимаю правой кнопкой на ссылку «другие новости» и в контекстном меню нет пунтка открыть в новом окне. При нажатии через ctrl новая вкладка не открывается. Я решил глянуть исходный код и вижу javascript:void(0);
Для меня это стало новостью, ведь все что читал до этого — было однозначно против такого решения.

Я имею ввиду ситуацию когда ссылка запускает какой-то js код и по прямому назначению не используется, то какую разметку лучше использовать?
<a href="javascript:void(0);">...</a>
или
<a href="#">...</a>

Void лучше href="#" поскольку пользователя нет возможности открыть новое окно с тем-же самым документом. Т.е. поведение href="#" при открытии в новом окне для пользователей неожиданно. Если какой-то возможности нет — то ее не должно быть в интерфейсе. Если на пальцах пользователь: кликает на 15 ссылок правой кнопкой мыши и открывает каждую в новой вкладке. В итоге у него 16 вкладок с одним и тем-же документом.

Более того, void «правильней» href=«javascript:void(0);» — ничего не делать. href="#" — перейти в начало страницы.

Чтобы если вдруг стандарт «javascript:» отменят не было коллизий используйте вместе с ним onclick=«return false;». Подсмотрено у Гугл ньюс:

<a onclick="return false;" href="javascript:void(0);">...</a>

Кода, конечно, много, но так удобнее для пользователей.

P.S. под href="#" я подразумевал когда хреф содержит только решетку. Если у вас есть ссылка href="#someMark" и документ нормально реагирует на метку, то void не нужен.

Автор: Hkey

Источник


* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js