Как работает всплытие события в JS?

Question

[Uzumeti]

Доброго дня!

Помогите пожалуйста вникнуть в понятие всплытия событий в JS. Я прочитал несколько описаний, но предполагаю, что понял материал неправильно.

Задачу нужно было решить такую:

1. Есть слой на весь экран, внутри которого формируется ещё один видимый слой
2. Когда пользователь тыкает мышей на основной слой, весь слой пропадает (и основной, и детенышевый)
3. Нужно, чтобы когда пользователь тыкает по внутреннему маленькому слою, слой не закрывался, а закрывался только при тыке на большую зону.

Как пробовал решать:

Прочитал, что есть такое понятие, как всплытие события. Обрадовался, что вроде бы, это и должно решить мои проблемы. Использовал .stopPropagation(). По моей логике, событие, которое формируется на большом слое должно убиться внутри маленького слоя. Но оно так не работает. Сдаётся мне, что я не совсем верно понимаю иерархию. Помогите пожалуйста :)

Пример кода:

<div id="77">Нажми</div>
<div id="s1" class="blackstar"> <!--Это основной слой, который всё заполоняет и черный-->
<div id="zu" class="zu1">
Тут всплывающее окно 200х200 <!--Это всплывающее окно в центре черного листа-->
</div>
</div>

var k1 = document.getElementById ('77');
k1.onclick = function () 
{
pe = document.getElementById('zu');
pe.innerHTML='Описание';

g1= document.getElementById('s1');
g1.style.display = "block";}

g2= document.getElementById('s1');
g2.onclick = function (ee){
g2.style.display = "none";
ee.stopPropagation();

}

Answer 1

[Алексей Уколов]

У вас id в коде и в разметке не совпадают, плюс код не отформатирован нормально, плюс имена переменных бессмысленные. Поэтому очень сложно понять как это всё должно работать.

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

Должно быть как-то так:

document.getElementById('z1').addEventListener('click', function (event) {
  event.stopPropagation();
});

var parent = document.getElementById('s1');
parent.addEventListener('click', function (event) {
  parent.style.display = "none";
});

Comments

[Uzumeti]

Большое спасибо! Так работает.

Так получается, что без дополнительного обработчика на дочернем элементе эта методика не сработает?

Разве скрипт не воспринимает это так:

Мол, выполни событие, при клике на родителе, но если кликнули на дочернем элементе, то суши вёсла.

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

[Алексей Уколов]

Да, ваша логика неправильная. Событие начинает обрабатываться от дочерних элементов и постепенно всплывает по дереву его родителей. Соответственно, если не хотите, чтобы оно доходило до родителя, нужно явно это указать на уровне дочернего элемента.

Мне кажется, подробнее, чем здесь, этот процесс сложно описать: learn.javascript.ru/event-bubbling Там и картинки и интерактивные примеры.

[Uzumeti]

Алексей Уколов, я читал этот материал, но почему-то сложилось именно обратное представление. Большое спасибо за разъяснение :)