Нужно ли использовать '#' или 'javascript:void(0)' в href-атрибуте пустых ссылок

Пустые ссылки с # или javascript:void(0) часто встречаются в интерфейсах, но ведут себя по-разному. Они влияют на прокрутку страницы, историю браузера и доступность. Неправильный выбор может вызвать побочные эффекты и проблемы с SEO.

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

Обновлено: 2023-10-05 07:13:07 ВС Валентин Сейидовавтор материала

Стоит ли применять JavaScript void(0)?

Если использовать #, и тем самым препятствуя привычной работе ссылок, (например, для прокрутки к верху страницы), то приходится указывать и значение return false для функции в событии onclick:

<a href="#" onclick="return false;">Hey</a>
<!-- Or -->
<a href="#" id="link">Hey</a>    
<script>
    document.getElementById("link").addEventListener("click",function(){
        return false;
    },false);
</script>

Если вместо этого использовать javascript:void, то использовать return false не нужно, так как void(0) – самый миниатюрный скрипт, который расценивается как undefined. То есть:

<a href="javascript:void(0);">Привет!</a>

Тот же эффект, что и при использовании href="#", только код с JavaScript void меньше и чище.

JavaScript: void(0)

Когда мы используем JavaScript в навигации, значение return в исполняемом скрипте становится содержимым нового документа, который отображается в браузере. Оператор void превращает значение return value в следующем за ним выражении в return undefined, что и предотвращает исполнение данного события.

Ссылка перенаправляет браузер на текстовую версию результатов, которые расценены как JavaScript. Однако если результатом будет undefined, то браузер останется на той же странице. JavaScript void 0 - что значит? Это миниатюрный скрипт, который определяется как undefined.

Однако javascript:void(0); нарушает Content Security Policy (CSP, политика защиты контента) у протокола HTTPS эта защита включена. Это помогает выявлять и нивелировать определенные типы атак, включая Cross-Site Scripting (XSS ), инъекции вредоносных данных.

Следовательно, если вы суеверный разработчик, то пользуйтесь href="#" вместо javascript:void и не беспокойтесь о нарушении политики защиты.

Href="#"

Хэш безопаснее в тех случаях, когда у пользователей отключена поддержка JavaScript.

Хотя эту проблему можно легко обойти за счет jQuery:

$('a[href="#"]').click(function(e) {
    e.preventDefault ? e.preventDefault() : e.returnValue = false;
});

Можно даже вернуть false в атрибут элемента onclick, и получить тот же эффект:

<a href="#" onclick="return false;">Привет! Я ссылка, которая ничего не делает</a>

Несколько рекомендаций напоследок

В href javascript void 0 используется, если нужен четкий и быстрый результат.

href="#" и предотвращение исполнения события используется тогда, когда не хочется нарушать стандарты JavaScript.

• Если ссылка никуда не ведёт, не используйте элемент <a>. Воспользуйтесь элементом <span>, а также не забудьте стилизовать ссылки при помощи CSS;
• Представление не следует смешивать с содержанием. Это значит никаких javascript:action и атрибутов onclick. Вместо этого предотвратите исполнение события при помощи чистого кода JavaScript.

ВС Валентин Сейидовавтор-переводчик