Обработчик клика сработал, сообщение вывелось, но вместе с тем произошёл переход по ссылке на другую страницу.

Кнопка свёрстана ссылкой (тег <a>), а не кнопкой (тег <button>) на случай, если у пользователя не будут работать скрипты. Такое бывает редко, но наш верстальщик продумал такой сценарий. Мы не можем поменять вёрстку, наша задача — программировать логику. На практике это встречается часто: разработчик получает готовую вёрстку и должен решать свои задачи, не меняя разметку.

Что же делать?

Некоторые элементы страницы имеют действия по умолчанию. Их ещё называют дефолтными действиями. Например, клик по кнопке отправления формы вызывает отправку данных этой формы на сервер, а при клике по ссылке браузер переходит по этой ссылке. Это как раз наш случай!

Дефолтные действия можно отменять при необходимости, мы так и поступим. В этом поможет объект event.

Объект event — параметр функции-обработчика. Он всегда передаётся браузером в эту функцию в момент наступления события. Этот объект содержит много полезных свойств и методов, в частности метод, который отменяет действие по умолчанию: preventDefault().

Чтобы использовать свойства и методы объекта event, достаточно указать этот объект параметром функции-обработчика и написать инструкции. Остальное сделает JavaScript. Среди некоторых разработчиков принято называть параметр сокращённо — evt. Это позволяет избежать некоторых ошибок, о которых мы поговорим в будущих тренажёрах. Мы тоже будем называть параметр обработчика evt. Объект события будет передан в функцию, как только это событие случится.

link.addEventListener('click', function(evt) {
  // Отменяем действие по умолчанию
  evt.preventDefault();

  // Добавляем инструкции для события клика
  console.log('Произошёл клик');
});

В примере мы отменили действие по умолчанию и при клике по ссылке переход не произойдёт. Вместо этого при клике в консоль выведется сообщение: Произошёл клик.

Отменим дефолтное действие у ссылки «Показать контакты» в нашем проекте. Убедимся, что переход по ссылке не происходит. При этом мы не сломаем поведение, которое закладывал верстальщик: если у пользователя будут скрипты, попап появится на странице, а если нет, произойдёт переход по ссылке на заранее подготовленную для этого страницу.