Небольшая заметка о том, чем отличаются между собой JavaScript методы preventDefault, stopPropagation и stopImmediatePropagation.

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

$('a').click(function(){
	# some code
	return false;
});

Вроде бы все хорошо, но понимаете ли вы что происходит за ширмой, когда вы кликаете по ссылке? Первое – да, вы добились своей цели, вы предотвратили посещение ссылки( тут сработал event.preventDefault() метод), но вы также остановили распространение(propagation) события ( по сути выполнили event.stopPropagation() ) и теперь callback-фунция возвращает false.

Итак, как вы уже поняли, такой способ увеличивает коэффициент кривизны кода.

Если вы всего лишь хотите предотвратить действие браузера по умолчанию, то вам следует использовать preventDefault метод:

$('a').click(function(event){
	# some code
	event.preventDefault();
});

Идем дальше. Что такое stopPropagation? Проще будет разобраться на примере. Допустим что у нас есть такая структура HTML:

<div id="demo">
    <a href="ctoiam.com">Link</a>
</div>

И два обработчика:

$('a').click(function(event){
	event.preventDefault();
	event.stopPropagation();
	console.log('You have clicked the link.');
});

$('#demo').click(function(){
	$(this).toggleClass('yellow');
	console.log('You have clicked the demo div.');
});

Можем убедиться в том, что при клике на ссылку цвет блока не изменяется на желтый и сам обработчик не вызывается. А все благодаря методу stopPropagation(), который останавливает всплытие (bubbling) события “клик” к родительским элементам.

Вот пример полностью. Если мы уберем оттуда stopPropagation(), то сможем убедиться, что все работает.

А что такое stopImmediatePropagation()? и чем отличается от stopPropagation()?Сразу пример в ответ. Как видим stopImmediatePropagation() останавливает не только всплытие события по родительским элементам, но также останавливает работу всех последующих обработчиков конкретного события на данном элементе.