Остановка всплытия события

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

Опубликовано 03.03.2025
Просмотры 19
Автор
Рек. время прохождения 2 минуты
Упражнений 8
Комментарии 0
Тренажер JavaScript: Покоряем HTML DOM

В этом тренажере вы попрактикуетесь в остановке всплытия событий в JavaScript при взаимодействии с DOM. Всплытие (bubbling) - это процесс, при котором событие, возникшее на вложенном элементе, последовательно передается всем его родительским элементам. Иногда такое поведение нежелательно, и его необходимо предотвращать. В заданиях вам будет предоставлен HTML-код и частично написанный JavaScript-код. Ваша задача - дополнить JavaScript-код, используя метод `stopPropagation()` (или его аналоги), чтобы предотвратить всплытие событий в различных сценариях. Внимательно читайте условия задач и анализируйте структуру HTML, чтобы правильно определить, где и как остановить всплытие.

Список тем

Остановка всплытия при клике на кнопку

Имеется кнопка внутри div'а. При клике на кнопку, событие клика 'всплывает' до div'а и вызывает обработчик, привязанный к div'у. Ваша задача: предотвратить всплытие события клика от кнопки к div'у. В результате, при клике на кнопку, должен выполняться только обработчик, привязанный к кнопке, а обработчик div'а не должен срабатывать.

HTML
Восстановить HTML
<div id="myDiv">
  <button id="myButton">Нажми меня</button>
</div>
JavaScript
document.getElementById("myButton").addEventListener("click", function(event) {
  input__1;
  console.log("Клик по кнопке");
});

document.getElementById("myDiv").addEventListener("click", function() {
  console.log("Клик по DIV");
});
Используйте метод `event.stopPropagation()` в обработчике события клика на кнопке, чтобы предотвратить дальнейшее всплытие события.
Заполнить ответами все поля
Результат
Лог
Выполнить
Отметить решенным
Показать подсказку

Остановка всплытия при клике на дочерний элемент

Есть родительский элемент (div) и дочерний элемент (span) внутри него. К обоим элементам привязаны обработчики события 'click'. Задача: при клике на дочерний элемент (span) предотвратить срабатывание обработчика клика, привязанного к родительскому элементу (div).

HTML
Восстановить HTML
<div id="parent">
  Родительский элемент
  <span id="child">Дочерний элемент</span>
</div>
JavaScript
document.getElementById("parent").addEventListener("click", function() {
  console.log("Клик по родителю");
});

document.getElementById("child").addEventListener("click", function(input__1) {
  console.log("Клик по дочернему элементу");
  input__1.input__2();
});
В обработчике события 'click' для дочернего элемента используйте `event.stopPropagation()`, чтобы остановить всплытие события до родительского элемента.
Заполнить ответами все поля
Результат
Лог
Выполнить
Отметить решенным
Показать подсказку

Остановка всплытия с использованием this

Имеется список элементов (li), вложенных в неупорядоченный список (ul). При клике на любой элемент списка (li), событие 'click' всплывает до ul. Необходимо остановить всплытие события при клике на элемент списка. Используйте `this` для ссылки на текущий элемент.

HTML
Восстановить HTML
<ul id="myList">
  <li>Элемент 1</li>
  <li>Элемент 2</li>
  <li>Элемент 3</li>
</ul>
JavaScript
const listItems = document.querySelectorAll("#myList li");

for (let i = 0; i < listItems.length; i++) {
  listItems[i].addEventListener("click", function(event) {
    input__1.stopPropagation();
    console.log("Клик по элементу списка: " + this.textContent);
  });
}

document.getElementById("myList").addEventListener("click", function(){
    console.log('Клик по ul');
});
В обработчике события клика для элементов списка (li), получите доступ к объекту события через параметр функции-обработчика. Затем используйте `event.stopPropagation()` для предотвращения всплытия.
Заполнить ответами все поля
Результат
Лог
Выполнить
Отметить решенным
Показать подсказку

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

Имеется ссылка (тег `<a>`), вложенная в div. При клике на ссылку происходит переход по ссылке (действие по умолчанию) и всплытие события до div'а. Задача: предотвратить и переход по ссылке, и всплытие события.

HTML
Восстановить HTML
<div id="container">
  <a href="https://example.com" id="myLink">Ссылка</a>
</div>
JavaScript
document.getElementById("myLink").addEventListener("click", function(event) {
  input__1.preventDefault();
  input__1.input__2();
  console.log("Клик по ссылке");
});

document.getElementById("container").addEventListener("click", function() {
  console.log("Клик по контейнеру");
});
Используйте `event.preventDefault()` для предотвращения действия по умолчанию (перехода по ссылке) и `event.stopPropagation()` для остановки всплытия события.
Заполнить ответами все поля
Результат
Лог
Выполнить
Отметить решенным
Показать подсказку

Остановка всплытия на промежуточном элементе

Есть три вложенных друг в друга div'а: outer, middle и inner. К каждому div'у привязан обработчик события 'click'. Задача: при клике на inner div, остановить всплытие события на уровне middle div. То есть, обработчик для outer div не должен срабатывать.

CSS
.box { padding: 20px; border: 1px solid black; margin: 10px; }
HTML
Восстановить HTML
<div id="outer" class="box">
  Outer
  <div id="middle" class="box">
    Middle
    <div id="inner" class="box">Inner</div>
  </div>
</div>
JavaScript
document.getElementById("outer").addEventListener("click", function() {
  console.log("Клик по outer");
});

document.getElementById("middle").addEventListener("click", function(input__1) {
    input__1.stopPropagation();
    console.log('Клик по middle и остановка всплытия');
});

document.getElementById("inner").addEventListener("click", function(event) {
  console.log("Клик по inner");
});
Добавьте обработчик события 'click' для middle div. В этом обработчике вызовите `event.stopPropagation()`, чтобы остановить дальнейшее всплытие события от inner div.
Заполнить ответами все поля
Результат
Лог
Выполнить
Отметить решенным
Показать подсказку

Остановка всплытия при двойном клике

Имеется кнопка. При двойном клике на кнопку, событие 'dblclick' всплывает. Задача: предотвратить всплытие события двойного клика.

HTML
Восстановить HTML
<div id="myDiv2">
 <button id="myButton2">Двойной клик</button>
</div>
JavaScript
document.getElementById("myButton2").addEventListener("dblclick", function(event) {
  input__1.stopPropagation();
  console.log("Двойной клик по кнопке");
});

document.getElementById("myDiv2").addEventListener("dblclick", function(e) {
    console.log("Двойной клик по DIV");
});
Используйте событие `dblclick` и метод `event.stopPropagation()` в обработчике этого события.
Заполнить ответами все поля
Результат
Лог
Выполнить
Отметить решенным
Показать подсказку

Остановка всплытия при наведении мыши

Есть два вложенных div'а. При наведении мыши на внутренний div (mouseover), событие всплывает до внешнего div'а. Задача: остановить всплытие события mouseover.

CSS
.outer { width: 200px; height: 100px; background-color: lightblue; } .inner { width: 100px; height: 50px; background-color: lightgreen; }
HTML
Восстановить HTML
<div class="outer" id="outerDiv">
  <div class="inner" id="innerDiv"></div>
</div>
JavaScript
document.getElementById("outerDiv").addEventListener("mouseover", function() {
  console.log("Мышь над outerDiv");
});

document.getElementById("innerDiv").addEventListener("mouseover", function(input__1) {
  input__1.input__2();
  console.log("Мышь над innerDiv");
});
Используйте событие `mouseover` и метод `event.stopPropagation()` в обработчике.
Заполнить ответами все поля
Результат
Лог
Выполнить
Отметить решенным
Показать подсказку

Остановка всплытия при клике на картинку внутри ссылки

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

HTML
Восстановить HTML
<a href="https://example.com" id="linkWithImage">
  <img src="https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike2-300x300.png" alt="Картинка" id="myImage">
</a>
<div id="parentDiv">Родительский элемент</div>
JavaScript
document.getElementById("myImage").addEventListener("click", function(event) {
  console.log("Клик по картинке");
});

document.getElementById("linkWithImage").addEventListener("click", function(input__1) {
  input__1.input__2();
  input__1.input__3();
  console.log('Клик по ссылке, но переход отменен и всплытие остановлено');
});

document.getElementById("parentDiv").addEventListener("click", function(){
    console.log('Клик по родителю');
});
Добавьте обработчик события `click` для ссылки. Внутри обработчика вызовите методы `event.preventDefault()` и `event.stopPropagation()`.
Заполнить ответами все поля
Результат
Лог
Выполнить
Отметить решенным
Показать подсказку
Предыдущая темаСледующая тема
НайтиКурс.Ру
Добавить комментарий