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

articleocw-578f4a8d90924

Стоит ли применять 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.

Перевод статьи “Should I use ‘#’ or ‘javascript:void(0);’ on the href attribute of my empty links” был подготовлен дружной командой проекта Сайтостроение от А до Я.