В этом тренажере вы попрактикуетесь в остановке всплытия событий в JavaScript при взаимодействии с DOM. Всплытие (bubbling) - это процесс, при котором событие, возникшее на вложенном элементе, последовательно передается всем его родительским элементам. Иногда такое поведение нежелательно, и его необходимо предотвращать. В заданиях вам будет предоставлен HTML-код и частично написанный JavaScript-код. Ваша задача - дополнить JavaScript-код, используя метод `stopPropagation()` (или его аналоги), чтобы предотвратить всплытие событий в различных сценариях. Внимательно читайте условия задач и анализируйте структуру HTML, чтобы правильно определить, где и как остановить всплытие.
- Модуль 1: Основы выбора элементов
- Выбор элемента по ID.
- Выбор элементов по классу.
- Выбор элементов по тегу.
- Выбор по селектору CSS.
- Выбор по атрибуту.
- Поиск элементов внутри другого элемента.
- Поиск родительского элемента.
- Поиск соседних элементов (предыдущий, следующий).
- Поиск первого и последнего дочернего элемента.
- Поиск всех дочерних элементов.
- Модуль 2: Манипуляция содержимым
- Модуль 3: Работа с атрибутами
- Модуль 4: Управление классами
- Модуль 5: Управление стилями
- Модуль 6: Создание и удаление элементов
- Создание нового элемента.
- Вставка элемента перед другим элементом.
- Вставка элемента после другого элемента.
- Добавление элемента в определенную позицию внутри списка дочерних элементов.
- Удаление элемента из DOM.
- Замена одного элемента другим.
- Перемещение существующего элемента в другое место DOM..
- Очистка содержимого элемента без его удаления.
- Модуль 7: Обработка событий
- Модуль 8: Работа с формами
- Модуль 9: Продвинутые манипуляции
- Модуль 10: Работа с размерами и прокруткой
- Получение размеров элемента.
- Получение позиции элемента относительно окна браузера.
- Получение позиции элемента относительно родительского элемента.
- Управление прокруткой страницы.
- Определение, виден ли элемент в текущей области просмотра.
- Плавная прокрутка к элементу.
- Создание элемента, который фиксируется при прокрутке.
- Модуль 11: Работа с медиа-элементами
- Модуль 12: Практические задания
Остановка всплытия при клике на кнопку
Имеется кнопка внутри div'а. При клике на кнопку, событие клика 'всплывает' до div'а и вызывает обработчик, привязанный к div'у. Ваша задача: предотвратить всплытие события клика от кнопки к div'у. В результате, при клике на кнопку, должен выполняться только обработчик, привязанный к кнопке, а обработчик div'а не должен срабатывать.
<div id="myDiv">
<button id="myButton">Нажми меня</button>
</div>document.getElementById("myButton").addEventListener("click", function(event) {
input__1;
console.log("Клик по кнопке");
});
document.getElementById("myDiv").addEventListener("click", function() {
console.log("Клик по DIV");
});Остановка всплытия при клике на дочерний элемент
Есть родительский элемент (div) и дочерний элемент (span) внутри него. К обоим элементам привязаны обработчики события 'click'. Задача: при клике на дочерний элемент (span) предотвратить срабатывание обработчика клика, привязанного к родительскому элементу (div).
<div id="parent">
Родительский элемент
<span id="child">Дочерний элемент</span>
</div>document.getElementById("parent").addEventListener("click", function() {
console.log("Клик по родителю");
});
document.getElementById("child").addEventListener("click", function(input__1) {
console.log("Клик по дочернему элементу");
input__1.input__2();
});Остановка всплытия с использованием this
Имеется список элементов (li), вложенных в неупорядоченный список (ul). При клике на любой элемент списка (li), событие 'click' всплывает до ul. Необходимо остановить всплытие события при клике на элемент списка. Используйте `this` для ссылки на текущий элемент.
<ul id="myList">
<li>Элемент 1</li>
<li>Элемент 2</li>
<li>Элемент 3</li>
</ul>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');
});Предотвращение действия по умолчанию и остановка всплытия
Имеется ссылка (тег `<a>`), вложенная в div. При клике на ссылку происходит переход по ссылке (действие по умолчанию) и всплытие события до div'а. Задача: предотвратить и переход по ссылке, и всплытие события.
<div id="container">
<a href="https://example.com" id="myLink">Ссылка</a>
</div>document.getElementById("myLink").addEventListener("click", function(event) {
input__1.preventDefault();
input__1.input__2();
console.log("Клик по ссылке");
});
document.getElementById("container").addEventListener("click", function() {
console.log("Клик по контейнеру");
});Остановка всплытия на промежуточном элементе
Есть три вложенных друг в друга div'а: outer, middle и inner. К каждому div'у привязан обработчик события 'click'. Задача: при клике на inner div, остановить всплытие события на уровне middle div. То есть, обработчик для outer div не должен срабатывать.
.box { padding: 20px; border: 1px solid black; margin: 10px; }<div id="outer" class="box">
Outer
<div id="middle" class="box">
Middle
<div id="inner" class="box">Inner</div>
</div>
</div>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");
});Остановка всплытия при двойном клике
Имеется кнопка. При двойном клике на кнопку, событие 'dblclick' всплывает. Задача: предотвратить всплытие события двойного клика.
<div id="myDiv2">
<button id="myButton2">Двойной клик</button>
</div>document.getElementById("myButton2").addEventListener("dblclick", function(event) {
input__1.stopPropagation();
console.log("Двойной клик по кнопке");
});
document.getElementById("myDiv2").addEventListener("dblclick", function(e) {
console.log("Двойной клик по DIV");
});Остановка всплытия при наведении мыши
Есть два вложенных div'а. При наведении мыши на внутренний div (mouseover), событие всплывает до внешнего div'а. Задача: остановить всплытие события mouseover.
.outer { width: 200px; height: 100px; background-color: lightblue; } .inner { width: 100px; height: 50px; background-color: lightgreen; }<div class="outer" id="outerDiv">
<div class="inner" id="innerDiv"></div>
</div>document.getElementById("outerDiv").addEventListener("mouseover", function() {
console.log("Мышь над outerDiv");
});
document.getElementById("innerDiv").addEventListener("mouseover", function(input__1) {
input__1.input__2();
console.log("Мышь над innerDiv");
});Остановка всплытия при клике на картинку внутри ссылки
Имеется ссылка, внутри которой находится картинка. При клике на картинку, событие клика всплывает до ссылки, а затем и выше. Нужно остановить всплытие *только* на уровне ссылки, предотвратив при этом переход по ссылке.
<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>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('Клик по родителю');
});