Предотвращение действия по умолчанию: Тренажер JavaScript: Покоряем HTML DOM

Тренажер по работе с HTML DOM на JavaScript для пользователей с начальным и средним уровнем подготовки.

В этом тренажере вы попрактикуетесь в предотвращении стандартного поведения браузера при возникновении событий. Стандартное поведение, например, переход по ссылке при клике или отправка формы, иногда требуется отменить, чтобы реализовать собственную логику обработки. В заданиях вам будет предоставлен HTML-код и JavaScript-код с пропусками. Ваша задача - заполнить пропуски, чтобы предотвратить действие браузера по умолчанию и, возможно, добавить свою обработку события. Часть задач условные, так как действия отправки формы или перехода по ссылке запрещены общими правилами запуска скриптов.

Список тем

Предотвращение перехода по ссылке

Дан HTML-код с ссылкой. При клике на ссылку происходит переход на другую страницу. Ваша задача - модифицировать JavaScript-код так, чтобы при клике на ссылку переход по указанному в `href` адресу не происходил. Вместо перехода измените текст внутри самой ссылки.

HTML

Восстановить HTML

                      <a id="myLink" href="https://example.com">Нажми на меня</a>

<a id="myLink" href="https://example.com">Нажми на меня</a>

JavaScript

const link = document.getElementById("myLink");
link.addEventListener("click", function(event) {
  input__1.preventDefault();
  input__2.textContent = "Переход отменен!";
});

                     const link = document.getElementById("myLink");
link.addEventListener("click", function(event) {
  input__1.preventDefault();
  input__2.textContent = "Переход отменен!";
});

Используйте метод `event.preventDefault()` внутри обработчика события `click` для ссылки, чтобы отменить стандартное действие браузера (переход по ссылке).

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку

Предотвращение отправки формы

Имеется форма с кнопкой отправки. При нажатии на кнопку "Отправить" происходит стандартная отправка формы с перезагрузкой страницы. Необходимо предотвратить отправку формы и вместо этого вывести текст в специальный `div` под формой.

HTML

Восстановить HTML

                      <form id="myForm">
  <input type="text" name="name" value="Имя">
  <button type="submit">Отправить</button>
</form>
<div id="output"></div>

<form id="myForm">
  <input type="text" name="name" value="Имя">
  <button type="submit">Отправить</button>
</form>
<div id="output"></div>

JavaScript

const form = document.getElementById("myForm");
form.addEventListener("submit", function(input__1) {
  input__1.preventDefault();
  const outputDiv = document.getElementById(input__2);
  outputDiv.textContent = "Форма не отправлена!";
});

                     const form = document.getElementById("myForm");
form.addEventListener("submit", function(input__1) {
  input__1.preventDefault();
  const outputDiv = document.getElementById(input__2);
  outputDiv.textContent = "Форма не отправлена!";
});

Добавьте обработчик события `submit` для формы. Внутри обработчика вызовите метод `preventDefault()` у объекта события. Затем получите доступ к элементу `div` с id="output" и измените его содержимое.

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку

Предотвращение всплытия контекстного меню

При правом клике мыши на элементе `div` появляется стандартное контекстное меню браузера. Задача - предотвратить появление этого меню при клике правой кнопкой мыши на указанном элементе.

HTML

Восстановить HTML

                      <div id="myDiv">Кликни правой кнопкой мыши</div>

<div id="myDiv">Кликни правой кнопкой мыши</div>

JavaScript

const divElement = document.getElementById("myDiv");
divElement.addEventListener("contextmenu", function(input__1) {
  input__1.input__2();
});

                     const divElement = document.getElementById("myDiv");
divElement.addEventListener("contextmenu", function(input__1) {
  input__1.input__2();
});

Используйте событие `contextmenu` и метод `preventDefault()` объекта события.

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку

Предотвращение выделения текста

При двойном клике на тексте внутри абзаца он выделяется. Необходимо предотвратить это стандартное поведение браузера.

HTML

Восстановить HTML

                      <p id="myParagraph">Двойной клик по этому тексту</p>

<p id="myParagraph">Двойной клик по этому тексту</p>

JavaScript

const paragraph = document.getElementById("myParagraph");
paragraph.addEventListener(input__1, function(event) {
  event.preventDefault();
});

                     const paragraph = document.getElementById("myParagraph");
paragraph.addEventListener(input__1, function(event) {
  event.preventDefault();
});

Используйте событие `dblclick` и метод `preventDefault()` объекта события.

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку

Предотвращение действия и изменение стиля

При клике на кнопку должно меняться ее фоновый цвет, но стандартное поведение (если оно есть) должно быть предотвращено.

HTML

Восстановить HTML

                      <button id="myButton">Нажми меня</button>

<button id="myButton">Нажми меня</button>

JavaScript

const button = document.getElementById("myButton");

button.addEventListener("click", function(event) {
  event.preventDefault();
  this.input__1.backgroundColor = input__2;
});

                     const button = document.getElementById("myButton");

button.addEventListener("click", function(event) {
  event.preventDefault();
  this.input__1.backgroundColor = input__2;
});

Используйте событие `click` и метод `preventDefault()`. Для изменения стиля используйте свойство `style`.

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку

Предотвращение действия для нескольких элементов

Даны несколько ссылок. Нужно предотвратить переход по любой из них при клике.

HTML

Восстановить HTML

                      <a href="#link1">Ссылка 1</a>
<a href="#link2">Ссылка 2</a>
<a href="#link3">Ссылка 3</a>

<a href="#link1">Ссылка 1</a>
<a href="#link2">Ссылка 2</a>
<a href="#link3">Ссылка 3</a>

JavaScript

const links = document.querySelectorAll("a");

links.forEach(function(link) {
  link.addEventListener("click", function(event) {
    input__1.preventDefault();
    console.log("Переход по ссылке " + link.href + " отменен.");
  });
});

                     const links = document.querySelectorAll("a");

links.forEach(function(link) {
  link.addEventListener("click", function(event) {
    input__1.preventDefault();
    console.log("Переход по ссылке " + link.href + " отменен.");
  });
});

Используйте `querySelectorAll` для выбора всех ссылок. Затем в цикле добавьте обработчик события `click` к каждой ссылке с вызовом `preventDefault()`.

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку

Предотвращение действия с данными из атрибута

При клике на ссылку нужно предотвратить переход и вывести в консоль значение атрибута `data-info` этой ссылки.

HTML

Восстановить HTML

                      <a id="infoLink" href="https://example.com" data-info="Важная информация">Ссылка с данными</a>

<a id="infoLink" href="https://example.com" data-info="Важная информация">Ссылка с данными</a>

JavaScript

const infoLink = document.getElementById("infoLink");

infoLink.addEventListener("click", function(event) {
  event.preventDefault();
  console.log(input__1.dataset.input__2);
});

                     const infoLink = document.getElementById("infoLink");

infoLink.addEventListener("click", function(event) {
  event.preventDefault();
  console.log(input__1.dataset.input__2);
});

Используйте `event.preventDefault()` и `this.dataset.info`.

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку

Предотвращение и добавление класса

При клике на элемент списка (li) нужно предотвратить стандартное действие и добавить этому элементу класс "highlight".

CSS

.highlight {
  background-color: yellow;
}

HTML

Восстановить HTML

                      <ul>
  <li id="item1">Элемент 1</li>
  <li id="item2">Элемент 2</li>
  <li id="item3">Элемент 3</li>
</ul>

<ul>
  <li id="item1">Элемент 1</li>
  <li id="item2">Элемент 2</li>
  <li id="item3">Элемент 3</li>
</ul>

JavaScript

const listItems = document.querySelectorAll("li");

listItems.forEach(function(item) {
  item.addEventListener("click", function(event) {
    event.preventDefault();
    input__1.classList.add(input__2);
  });
});

                     const listItems = document.querySelectorAll("li");

listItems.forEach(function(item) {
  item.addEventListener("click", function(event) {
    event.preventDefault();
    input__1.classList.add(input__2);
  });
});

Используйте `event.preventDefault()` и `this.classList.add()`.

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку

Предотвращение действия checkbox

Нужно предотвратить изменение состояния чекбокса при клике на него.

HTML

Восстановить HTML

                      <input type="checkbox" id="myCheckbox">

<input type="checkbox" id="myCheckbox">

JavaScript

const checkbox = document.getElementById("myCheckbox");

checkbox.addEventListener("click", function(input__1) {
  input__1.preventDefault();
});

                     const checkbox = document.getElementById("myCheckbox");

checkbox.addEventListener("click", function(input__1) {
  input__1.preventDefault();
});

Используйте событие `click` и метод `preventDefault()` объекта события.

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку

Предотвращение действия и условная логика

При клике на кнопку, если у неё есть класс 'active', нужно предотвратить стандартное действие. Если класса нет, ничего делать не нужно.

CSS

.active {
  background-color: lightblue;
}

HTML

Восстановить HTML

                      <button id="conditionalButton" class="active">Кнопка</button>

<button id="conditionalButton" class="active">Кнопка</button>

JavaScript

const conditionalButton = document.getElementById("conditionalButton");

conditionalButton.addEventListener("click", function(event) {
  if (this.classList.contains(input__1)) {
    event.preventDefault();
    console.log('Действие предотвращено, так как есть класс active');
  }
});

                     const conditionalButton = document.getElementById("conditionalButton");

conditionalButton.addEventListener("click", function(event) {
  if (this.classList.contains(input__1)) {
    event.preventDefault();
    console.log('Действие предотвращено, так как есть класс active');
  }
});

Используйте `event.preventDefault()` и `classList.contains()`.

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку

Предотвращение действия и работа с изображениями

При клике на изображение нужно предотвратить стандартное действие (открытие изображения в новой вкладке) и изменить `src` изображения на другое.

HTML

Восстановить HTML

                      <img id="myImage" src="https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike2-300x300.png" alt="Картинка 1">

<img id="myImage" src="https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike2-300x300.png" alt="Картинка 1">

JavaScript

const image = document.getElementById("myImage");

image.addEventListener("click", function(event) {
  event.preventDefault();
  this.src = input__1;
});

                     const image = document.getElementById("myImage");

image.addEventListener("click", function(event) {
  event.preventDefault();
  this.src = input__1;
});

Используйте `event.preventDefault()` и изменение атрибута `src`.

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку

Предотвращение действия по условию (четность)

Дан список элементов. При клике на элемент с четным порядковым номером (начиная с 1) нужно предотвратить стандартное действие.

HTML

Восстановить HTML

                      <ul>
  <li>Элемент 1</li>
  <li>Элемент 2</li>
  <li>Элемент 3</li>
  <li>Элемент 4</li>
</ul>

<ul>
  <li>Элемент 1</li>
  <li>Элемент 2</li>
  <li>Элемент 3</li>
  <li>Элемент 4</li>
</ul>

JavaScript

const items = document.querySelectorAll("li");

items.forEach(function(item, index) {
  item.addEventListener("click", function(event) {
    if ((index + 1) input__1 2 === input__2) {
      event.preventDefault();
      console.log("Действие предотвращено для элемента с индексом " + index);
    }
  });
});

                     const items = document.querySelectorAll("li");

items.forEach(function(item, index) {
  item.addEventListener("click", function(event) {
    if ((index + 1) input__1 2 === input__2) {
      event.preventDefault();
      console.log("Действие предотвращено для элемента с индексом " + index);
    }
  });
});

Используйте `querySelectorAll`, цикл `forEach` и проверку индекса элемента на четность (`index % 2 === 0`).

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку

Комплексное предотвращение и манипуляция DOM

При клике на ссылку нужно предотвратить переход, удалить родительский элемент этой ссылки (li) и изменить текст в соседнем элементе списка.

HTML

Восстановить HTML

                      <ul>
  <li>Элемент 1</li>
  <li><a href="#">Ссылка</a></li>
  <li>Элемент 3</li>
</ul>

<ul>
  <li>Элемент 1</li>
  <li><a href="#">Ссылка</a></li>
  <li>Элемент 3</li>
</ul>

JavaScript

const link = document.querySelector("a");

link.addEventListener("click", function(event) {
  event.preventDefault();
  input__1.parentElement.remove();
  if (this.parentElement.input__2) {
      this.parentElement.previousElementSibling.textContent = "Текст изменен!";
  }
});

                     const link = document.querySelector("a");

link.addEventListener("click", function(event) {
  event.preventDefault();
  input__1.parentElement.remove();
  if (this.parentElement.input__2) {
      this.parentElement.previousElementSibling.textContent = "Текст изменен!";
  }
});

Используйте `event.preventDefault()`, `this.parentElement.remove()` и `previousElementSibling`.

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку