Відміна стандартної події, відміна події для батьківських елементів (запобігання bibbling-ефекту), відміна наступних подій
event.preventDefault() - запобігання стандартній події(наприклад: перехід за посиланням або відправка форми submit)
event.isDefaultPrevented() - повертає true/false в залежності чи викликався для поточного об'єкту метод preventDefault()
event.stopPropagation() - запобігає bibbling-ефекту (подія на дочірньоиу елементі не викликає таких самих подій на батьківських елементах, якщо вони для них прописані);
event.isPropagationStopped() - повертає true/false в залежності чи викликався для поточного об'єкту метод stopPropagation()
event.stopImmediatePropagation() - при багатьох однакових подіях для елемента, скасовує наступні події, а також зупиняє події для батьківських елементів (запобігання bibbling-ефекту)
event.isImmediatePropagationStopped() - повертає true/false в залежності чи викликався для поточного об'єкту метод stopImmediatePropagation()
Приклади
preventDefault() та isDefaultPrevented()Запобігання стандартній події (наприклад: перехід за посиланням або відправка форми submit)
Для посилання відміняємо перехід і виконуємо код - виводимо адресу та інформацію про факт застосування методу
$('a').click(function(event){
event.preventDefault();
var ah=$(this).attr('href');
$('#info1').text(ah);
if(event.isDefaultPrevented()) $('#info2').text('TRUE');
});
stopPropagation() та isPropagationStopped()
Запобігання bibbling-ефекту (подія на дочірньоиу елементі не викликає таких самих подій на батьківських елементах, якщо вони для них прописані) i
Клік по верхньому блоку не запускає клік по нижньому, хоча подія прописана для обох блоків (клікайте спочатку синій блок, потім жовтий)
#infoDP1
$('#spb div').click(function(event){
event.stopPropagation();
$(this).css('border','3px solid red');
if(event.isPropagationStopped()) $('#infoDP1').text('TRUE');
});
stopImmediatePropagation() та isImmediatePropagationStopped()
При багатьох однакових подіях для елемента, скасовує наступні події, а також зупиняє події для батьківських елементів (запобігання bibbling-ефекту)
Клик по верхньому блоку не запускає клік по ньому та нижньому блоку, хоча подія "click" прописана для обох блоків
$( "#pip" ).click(function( event ) {
event.stopImmediatePropagation();
if(event.isImmediatePropagationStopped()) $('#infoSIP').text(' TRUE');
});
/* цю подію для верхнього елементу скасовано */
$( "#pip" ).click(function() {
$( this ).css( "background-color", "red" );
});
/* ця подія для нижнього елементу не спрацює при кліку по верхньому елементу*/
$( "#bip" ).click(function() {
$( this ).css( "background-color", "red" );
});
далі ✏