Небольшая заметка о том, чем отличаются между собой 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() останавливает не только всплытие события по родительским элементам, но также останавливает работу всех последующих обработчиков конкретного события на данном элементе.