← Назад ко всем вопросам

Как остановить всплытие события

1️⃣ Как кратко ответить

Для остановки всплытия события в JavaScript используется метод stopPropagation(). Этот метод вызывается на объекте события внутри обработчика, чтобы предотвратить дальнейшее распространение события по дереву DOM.

2️⃣ Подробное объяснение темы

Всплытие события — это механизм в JavaScript, при котором событие, произошедшее на одном элементе, передается его родительским элементам вверх по дереву DOM. Например, если вы кликнули на кнопку, находящуюся внутри div, событие click сначала будет обработано кнопкой, затем div, и так далее, пока не достигнет корневого элемента документа.

Иногда возникает необходимость остановить это всплытие, чтобы событие не обрабатывалось родительскими элементами. Это может быть полезно, когда у вас есть специфическая логика, которую вы хотите применить только к конкретному элементу, не затрагивая его родителей.

Для этого используется метод stopPropagation(). Рассмотрим пример:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Stop Propagation Example</title>
    <style>
        #parent {
            width: 200px;
            height: 200px;
            background-color: lightblue;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        #child {
            width: 100px;
            height: 100px;
            background-color: coral;
        }
    </style>
</head>
<body>
    <div id="parent">
        Parent
        <div id="child">Child</div>
    </div>
​
    <script>
        // Получаем ссылки на элементы
        const parent = document.getElementById('parent');
        const child = document.getElementById('child');
​
        // Добавляем обработчик события на родительский элемент
        parent.addEventListener('click', function() {
            alert('Parent clicked');
        });
​
        // Добавляем обработчик события на дочерний элемент
        child.addEventListener('click', function(event) {
            alert('Child clicked');
            // Останавливаем всплытие события
            event.stopPropagation();
        });
    </script>
</body>
</html>

Объяснение кода:

  • HTML и CSS: Создаем два элемента div, где один вложен в другой. #parent — это родительский элемент, а #child — дочерний. Они стилизованы для наглядности.

  • JavaScript:

    • Получаем ссылки на элементы parent и child с помощью document.getElementById().
    • Добавляем обработчик события click на родительский элемент parent. При клике на parent будет показано сообщение "Parent clicked".
    • Добавляем обработчик события click на дочерний элемент child. При клике на child будет показано сообщение "Child clicked".
    • В обработчике события для child вызываем event.stopPropagation(). Это предотвращает дальнейшее всплытие события click к родительскому элементу parent.

Таким образом, при клике на child будет показано только сообщение "Child clicked", и всплытие события к parent не произойдет. Если бы stopPropagation() не использовался, то после сообщения "Child clicked" также появилось бы сообщение "Parent clicked", так как событие продолжило бы всплывать.

Тема: Браузер: DOM, события и модель
Стадия: Tech

🔒 Подпишись на бусти автора и стань Алигатором, чтобы получить полный доступ к функционалу сайта и отслеживать свой прогресс!

Твои заметки