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

Стоит ли применять 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: что нужно знать

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 и не беспокойтесь о нарушении политики защиты.

Работа с ссылками - Построении ссылок с помощью JavaScript

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.

Пожалуйста, оставляйте свои комментарии по текущей теме статьи. За комментарии, подписки, дизлайки, отклики, лайки огромное вам спасибо!