Доброго дня!
Помогите пожалуйста вникнуть в понятие всплытия событий в 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();
}
