Общепринятым является использование JavaScript в HTML-ссылках для выполнения определенного кода при нажатии на ссылку. Однако возникает вопрос о том, какой вариант лучше использовать для значения «href» в таких ссылках – «#» или «javascript:void(0)».
Пример проблемы
Рассмотрим два примера кода. В первом используется «#» в качестве значения «href», во втором — «javascript:void(0)».
<a href="#" onclick="myFunction();">Ссылка</a>
или
<a href="javascript:void(0)" onclick="myFunction();">Ссылка</a>
В обоих случаях при нажатии на ссылку будет выполнена функция myFunction(). Важно отметить, что эти два примера работают исключительно при наличии активированного JavaScript в браузере пользователя.
Сравнение «#» и «javascript:void(0)»
При использовании «#» в качестве значения «href», после выполнения JavaScript-кода браузер перемещает пользователя в начало страницы. Это происходит, потому что «#» является якорной ссылкой, которая по умолчанию ведет к началу страницы.
В случае с «javascript:void(0)», после выполнения JavaScript-кода никаких дополнительных действий не происходит. Это связано с тем, что «void(0)» в JavaScript означает «ничего не возвращать». Таким образом, браузер просто выполняет JavaScript-код и ничего больше.
Вывод
В целом, оба варианта можно использовать для запуска JavaScript-кода через HTML-ссылку. Однако, если не нужно, чтобы после выполнения кода страница прокручивалась вверх, лучше использовать «javascript:void(0)».
В любом случае, стоит помнить, что использование JavaScript внутри HTML-атрибутов не считается лучшей практикой. Более предпочтительным является использование метода addEventListener(), который позволяет назначить обработчик события непосредственно в JavaScript-коде, не засоряя HTML.
Добавить комментарий