В чем разница между href = «», href = «#» и href = «javascript: void (0)»

Краткий ответ:

href="#" прокрутит текущую страницу вверх

href=”javascript: void(0)” ничего не сделает.

href="#0" ничего не сделает.

Пустой HREF

Пустые ссылки HREF в основном означают повторный переход по текущей странице. Это похоже на операцию обновления, которая повторно отправляется на сервер.

`#` сам по себе

На самом деле это не бесполезная навигация. Это вызывает переход в верхнюю часть страницы.

Если вы поощряете использование # и предотвращаете поведение по умолчанию (прокрутите до верхней части документа), это неизбежно приведет к тому, что некоторые из них будут использовать значение 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: Теги

Иногда вы можете встретить HTML-документ, который использует href="JavaScript:Void(0);" внутри <a> элемента.

Другой способ сделать это - предоставить по существу пустую ссылку JavaScript. Для этого есть несколько вариантов:

<a href=”javascript:void(0)”> <a href=”javascript:{}”> <a href=”javascript:null”>

Ссылки и текст безвредны, потому что они буквально ничего не делают, но скрипы javascript нарушают Политику безопасности контента. Подробнее см. Здесь

`Href="#0"`

Если у вас нет именованной ссылки или идентификатора с именем 0 - это будет работать. Без навигации и без прокрутки.

Если по какой-то причине у вас есть идентификатор или именованная ссылка с именем 0, используйте другое несуществующее значение для хеша.

Используйте кнопку или интервал

Если ваша ссылка никуда не ведет, не используйте элемент <a>. Используйте <span> или <button> или что-нибудь еще подходящее и добавьте CSS (: hover), чтобы стилизовать его по своему усмотрению.

Теперь некоторые фреймворки, такие как Bootstrap и Material Design, предоставляют настраиваемый стиль для кнопок, чтобы кнопки можно было стилизовать как ссылки.

Например, в начальной загрузке вы можете использовать:

<button class="btn btn-link btn-sm" id="btnlink">Click Here</button>