22. Обмеження подій

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

Для посилання відміняємо перехід і виконуємо код - виводимо адресу та інформацію про факт застосування методу

Посилання: GOOGLE -----
$('a').click(function(event){
 	             event.preventDefault();
 	             var ah=$(this).attr('href');
                 $('#info1').text(ah);
                 
    if(event.isDefaultPrevented()) $('#info2').text('TRUE');
});
 

stopPropagation() та isPropagationStopped()

Запобігання bibbling-ефекту (подія на дочірньоиу елементі не викликає таких самих подій на батьківських елементах, якщо вони для них прописані) i

Клік по верхньому блоку не запускає клік по нижньому, хоча подія прописана для обох блоків (клікайте спочатку синій блок, потім жовтий)

#spb

#infoDP1
$('#spb div').click(function(event){
 	       event.stopPropagation();
 	       $(this).css('border','3px solid red');
 	       
           if(event.isPropagationStopped()) $('#infoDP1').text('TRUE');
   });
 

stopImmediatePropagation() та isImmediatePropagationStopped()

При багатьох однакових подіях для елемента, скасовує наступні події, а також зупиняє події для батьківських елементів (запобігання bibbling-ефекту)

Клик по верхньому блоку не запускає клік по ньому та нижньому блоку, хоча подія "click" прописана для обох блоків

#bip

#pip
#infoSIP
$( "#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" );
}); 
 

далі ✏
Ігор Ка