Давайте разберем ошибку, связанную с неожиданным переходом по ссылке. Пусть для примера дана следующая ссылка:
<a href="">link</a>
Получим нашу ссылку в переменную:
let link = document.querySelector('a');
Привяжем к нашей ссылке обработчик клика:
link.addEventListener('click', function() {
console.log(this.textContent);
});
И вот здесь нас ждет сюрприз. Код написан
верно, однако, вывод в консоли не появляется.
Дело в том, что при клике происходит переход
по ссылке. Так как в атрибуте href ничего
не указано, то ссылка просто ведет
на текущую страницу.
Это значит, что клик на ссылку приводит к перезагрузке страницы. То есть наши данные выводятся в консоль, затем страница перезагружается, и консоль становится пустой.
Если внимательно присмотреться, то можно увидеть, как в момент клика данные появляются в консоли на мгновение, а затем пропадают. Это и есть характерный признак данной ошибки.
Давайте посмотрим, как можно решить данную проблему.
Решение первое
В href ссылки нужно поставить
решетку. Это приведет к тому, что
ссылка будет указывать на определенное
место текущей страницы и при клике
на ссылку перезагрузки не будет.
Сделаем это:
<a href="#">link</a>
Решение второе
Более продвинутым способом является отмена действия по умолчанию с помощью метода preventDefault:
link.addEventListener('click', function(event) {
console.log(this.textContent);
event.preventDefault();
});