Как запретить всплытие события по дереву DOM
Иногда требуется, чтобы по клику по всему элементу происходило одно событие, а по клику по вложенному в него другому элементу — другое событие. Однако в стандартной модели Javascript событие «всплывает» вверх по дереву DOM, то есть клик по вложенному элементу «передаётся» до элемента, указанного в качестве объекта.
Если мы хотим этого избежать, то нужно использовать метод event.stopPropagation().Пример.
Имеется набор объектов:
<div class='a1'>
<div class='a2'></div>
<div class='a3'></div>
</div>
Как видно, в один блок вложены два. Допустим, эти два объекта — кнопка и всплывающий список. Нам нужно, чтобы по клику на поле старшего блока он закрывался, по клику по кнопке открывался список.
Делается достаточно просто:
$('.a2').click(function(event){
event.stopPropagation();
$(this).addClass('pressed');
$(this).next('.a3').fadeIn();
});
Метод event.stopPropagation() запрещает передачу события родительскому элементу, и он (в нашем случае) не закрывается, что позволяет производить манипуляции с дочерними объектами.