Ошибка перехода по ссылке в JavaScript

Давайте разберем ошибку, связанную с неожиданным переходом по ссылке. Пусть для примера дана следующая ссылка:

html<a href="">link</a>

Получим нашу ссылку в переменную:

javascriptlet link = document.querySelector('a');

Привяжем к нашей ссылке обработчик клика:

javascriptlink.addEventListener('click', function() {
  console.log(this.textContent);
});

И вот здесь нас ждет сюрприз. Код написан верно, однако, вывод в консоли не появляется. Дело в том, что при клике происходит переход по ссылке. Так как в атрибуте href ничего не указано, то ссылка просто ведет на текущую страницу.

Это значит, что клик на ссылку приводит к перезагрузке страницы. To есть наши данные выводятся в консоль, затем страница перезагружается, и консоль становится пустой.

Если внимательно присмотреться, то можно увидеть, как в момент клика данные появляются в консоли на мгновение, а затем пропадают. Это и есть характерный признак данной ошибки.

Давайте посмотрим, как можно решить данную проблему.

Решение первое

В href ссылки нужно поставить решетку. Это приведет к тому, что ссылка будет указывать на определенное место текущей страницы и при клике на ссылку перезагрузки не будет. Сделаем это:

html<a href="#">link</a>

Решение второе

Более продвинутым способом является отмена действия по умолчанию с помощью метода preventDefault:

javascriptlink.addEventListener('click', function(event) {
  console.log(this.textContent);
  event.preventDefault();
});