Что такое javascript: void(0) ?
И как правильно исправить эту ошибку на сайте
Если вы занимаетесь веб-разработкой, есть высока вероятность того, что вы сталкивались с выражением javascript:void(0);. Часто его используют при работе со ссылками и событиями на странице. Но что же оно означает и для чего его применяют? Давайте разбираться.
Что такое javascript:void(0);?
javascript:void(0); — это выражение на JavaScript, которое используют как значение атрибута href ссылки (выделяется в разметке <a></a> ).
Вот как это работает:
1. Ключевое слово javascript: означает для браузера, что здесь указан код на JavaScript.
2. Оператор void принимает аргумент и возвращает undefined, независимо от того, что передается в качестве аргумента. В нашем случае аргументом является 0, но при передаче любого другого значения результат будет тот же.
3. Таким образом, результатом выполнения javascript:void(0) является отсутствие возвращаемого значения. Для браузера это воспринимается как запрет выполнять действия, которые предусмотрены по умолчанию.
Для чего же используется javascript:void(0);?
Основное назначение этой конструкции — остановить стандартные операции в браузере. Как мы уже упоминали ранее, чаще всего ее можно увидеть в ссылках (<a></a>). Представим, что разработчик не хочет, чтобы происходило перенаправление на какую-то другую страницу или же стандартное обновление страницы. Тогда разработчик отметит это следующим образом:
<a href="javascript:void(0);" onclick="myFunction()">Жми здесь</a>
В примере выше при нажатии на ссылку браузер не обновит страницу и не будет выполнять любые другие стандартные и ненужные действия. Вместо этого вызывается функция myFunction(), которая и предназначена выполнить запланированный функционал. Оператор void(0) гарантирует, что никакие другие действия не будут осуществлены после того, как пользователь кликнет на ссылку.
Можно ли заменить javascript:void(0);?
Ответ — да, даже нужно. Давайте рассмотрим, как мы можем заменить данное выражение, а потом выясним, почему это стоит сделать.
Есть 2 основных варианта замены этого выражения:
1. return false
Этот вариант заключается в использовании именно событий и функций. Можно обрабатывать событие клика на ссылку без манипуляций атрибутом href. Для примера:
<a href="#" onclick="myFunction(); return false;">Жми здесь</a>
В этом случае атрибут href="#" должен был бы вызывать обновление страницы, но оператор return false; в функции onclick останавливает стандартное поведение.
Однако важно помнить, что применение # все же может вызвать обновление страницы или скроллинг к верхней части страницы, что может быть также нежелательным. Проверяйте, как ваши инструменты будут работать при использовании таких конструкций, впрочем, такой вариант есть и его стоит рассматривать.
2. preventDefault()
Современный и оптимальный способ предотвращения стандартного поведения событий — это использование метода event.preventDefault() в JavaScript.
<a href="#" id="myLink">Жми здесь</a>
<script>
document.getElementById("myLink").addEventListener("click", function(event){
event.preventDefault();
myFunction();
});
</script>
Этот подход позволяет отменить действие по умолчанию, которое выполняет браузер.
Именно такой способ указан в спецификации DOM 2 Event.
Почему не стоит использовать javascript:void(0);?
1. Плохая читабельность: применение такой конструкции может снизить восприятие кода. Это выглядит не так интуитивно, как, например, использование событий JavaScript через addEventListener.
2. Устаревшие подходы: хотя это довольно распространенный подход, он часто считается устаревшим в современной веб-разработке.
3. Проблемы с SEO: в контексте поисковых систем и инструментов javascript:void(0) может влиять на оптимизацию, поскольку такие ссылки не имеют реального назначения и могут быть расценены как плохо структурированный код.
Таким образом, конструкция javascript:void(0); используется для отмены стандартных операций браузера. Однако в современной веб-разработке существуют более элегантные и современные подходы для решения этой проблемы, такие как методы обработки событий через JavaScript (например, event.preventDefault()).
На практике же javascript:void(0) все еще применяется во многих давних или простых проектах, но новые стандарты программирования рекомендуют переходить на более понятные и современные методы работы с событиями.
