Відміна стандартної події, відміна події для батьківських елементів (запобігання 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" ); });
далі ✏