Для чего в данной функции stopPropagation?

Question

[lexchz]

Имеется такой код:

$( '.search-btn-mobile' ).on( 'click', function(event) {
		event.stopPropagation();
		$( '.search-block' ).fadeToggle(900);
		$(this).toggleClass( 'active' );
	});


	$(document).on('click', function(event) {
		if ($(event.target).closest('.search-block').length) return;
		if ($(window).width() < 768) {
			$('.search-block').fadeOut(100);
			$('.search-btn-mobile').removeClass('active');
		}
		event.stopPropagation();
	});

Если в первой функции event.stopPropagation() необходим, иначе произойдёт наложение двух противоположных действий, то для чего он во второй функции? Распространение события идёт на родителя, а что ниже document может быть?

Answer 1

[Vitaliy]

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

В данном примере при клике на .search-btn-mobile родительский элемент document (в частном случае) не получит событие клика

Comments

[lexchz]

Это да, но меня интересует, почему event.stopPropagation(); стоит здесь:

$(document).on('click', function(event) {
if ($(event.target).closest('.search-block').length) return;
if ($(window).width() < 768) {
$('.search-block').fadeOut(100);
$('.search-btn-mobile').removeClass('active');
}
event.stopPropagation();
});

Ведь распространиться по идее может только на window, но к нему событий клика не привязано

Answer 2

[Dark Hole]

Это нужно, наверно, для предовращения "погружения" события - почитайте