Клик на блоке внутри блока вызывает event блока родителя, как избежать?

Question

[Jonh Doe]

Если див внутри дива.
У родителя есть event on по которому он скрывается.
У чайлда есть такой-же event по которому совершается другое действие.
Но при клике на чайлде вызывается его действие и действие родителя.
Как совершать только действие чайлда?

Answer 1

[Yakov Akulov]

Думаю через stopPropagation:

$('#child').on('event', function(event){
 event.stopPropagation(); // запрещает дальнейщую передачу события
// обработка события
});

Comments

[Jonh Doe]

Спасибо, выручил.

Answer 2

[Илья Лесных]

Чтобы не просто скопипастить код со stopPropogation, а понимать почему так, советую прочитать что такое фазы capturing и bubbling в событиях, какие есть модели (W3C DOM vs IE DOM). Ну а следующая ссылка наглядно покажет как обрабатывается событие:
www.quirksmode.org/js/eventexample.html

Answer 3

[iamnothing]

Внутри функции обработчика child добавьте вызов stopPropogation(), который необходим для предотвращения всплытия события (именно это и происходит у вас):

$( ".child" ).click(function( event ) {
    event.stopPropagation();
    // ...
});

Answer 4

[Максим Денисюк]

Запретить всплытие события

Answer 5

[Юрий Лобанов]

Используйте stopPropagation()
codepen.io/iiil/pen/DJHab