event.preventDefault vs event.stopPropagation

Question

Qualcuno può spiegare qual è la differenza tra event.preventDefault() e event.stopPropagation()?

Ho una tabella e all'interno di quella tabella ho un tag img.

Quando faccio clic sul tag img, voglio vedere un popup.

Ma voglio anche per fermare la selezione di più righe, per cui uso:

$("table.items tbody tr").click(function(event) { 
     event.stopPropagation(); 
    }); 

Quando uso il codice js, non appare il popup;

Se elimino il codice js, il popup funziona.

$(".info").live("click",function(e){ 
    //console.log('ok'); 
    e.stopPropagation(); 
    var elem = $(this); 
    var id = $(this).attr("id").replace("image_","container_"); 
    $('#'+id).toggle(100, function() { 
     if($(this).css('display') == 'block') { 
      $.ajax({ 
       url: "$url", 
       data: { document_id:elem.attr('document_id') }, 
       success: function (data) { 
        $('#'+id).html(data); 
       } 
      }); 
      } 
     }); 
}); 

Perché?

Answer 1

Io non sono un esperto di Javascript, ma per quanto ne so:

stopPropagation è usato per assicurarsi che l'evento non bolla in alto nella catena. per esempio. un clic su un tag <td> potrebbe anche generare eventi di clic sul suo genitore <tr>, quindi il suo genitore <table>, ecc. stopPropagation impedisce che ciò accada.

preventDefault viene utilizzato per interrompere l'azione normale di un elemento, ad es. preventDefault in un gestore di clic su un collegamento interromperà il collegamento seguito o un pulsante di invio interromperà la presentazione del modulo.

Answer 2

Evento preventDefault From W3C:

L'event.preventDefault() metodo, si interrompe l'azione predefinita di un elemento accada. Per esempio:

impedire a un pulsante di invio di presentare un modulo di prevenire un collegamento dalla seguendo l'URL

evento stopPropagation From W3C:

Il metodo event.stopPropagation() interrompe il gorgogliare di un evento a elementi padre, impedendo l'esecuzione di qualsiasi gestore di eventi genitore da .

Answer 3

• stopPropagation su un bambino smetterà di tale evento accada sul genitore (l'intero antenati)
• preventDefault su un bambino si fermerà l'evento sul bambino ma accadrà sul suo genitore (e anche sugli antenati!)

Ora nel tuo codice che è il genitore? qual è il bambino?img è figlio tr è genitore (bebé nonno ad essere onesto), quindi indovina dove dovrebbe essere il codice stopPropagation.