event.preventDefault vs event.stopPropagation

Question

Czy ktoś może wyjaśnić, jaka jest różnica między event.preventDefault() i event.stopPropagation()?

Mam tabelę i wewnątrz tej tabeli Mam tag img.

Po kliknięciu znacznika img, chcę zobaczyć wyskakujące okienko.

Ale chcę, aby zatrzymać wybór wielu wierszy, więc używam:

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

Kiedy użyć kodu JS popup nie pojawia;

Po usunięciu kodu js zostanie wyświetlone okno podręczne.

$(".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); 
       } 
      }); 
      } 
     }); 
}); 

Dlaczego?

Answer 1

Nie jestem ekspertem Javascript ale o ile wiem:

stopPropagation służy do upewnij się, że zdarzenie nie bańka górę łańcucha. na przykład. kliknięcie znacznika <td> uruchomi także zdarzenia kliknięcia na rodzica <tr>, a następnie jego rodzic <table> itp. stopPropagation zapobiega temu.

preventDefault służy do zatrzymania normalnego działania elementu, np. preventDefault w module obsługi kliknięcia łącza uniemożliwiłoby śledzenie łącza lub przycisk przesyłania powodowałby zatrzymanie wysyłania formularza.

Answer 2

Event preventDefault From W3C:

event.preventDefault() metoda zatrzymuje domyślne działanie elementu dzieje. Na przykład:

zapobiec przycisk Prześlij od złożenia formą Zapobiegać link z następujący adres URL

Event stopPropagation From W3C:

Sposób Event.stopPropagation() zatrzymuje barbotaż zdarzenie do elementów macierzystych , uniemożliwiające wykonanie jakichkolwiek procedur obsługi zdarzeń nadrzędnych z .

Answer 3

• stopPropagation na dziecka zatrzyma to wydarzenie dzieje na rodzica (cały przodków)
• preventDefault na dziecka zatrzyma zdarzenie na dziecko, ale stanie się na nim rodzic rodzic (i także przodkowie!)

Teraz w swoim kodzie, który jest rodzicem? którym jest dziecko?img jest dzieckiem tr jest rodzicem (dobrze dziadkiem, szczerze mówiąc), więc zgadnij, gdzie powinien być kod stopPropagation.