event.preventDefault vs event.stopPropagation

Question

Kann jemand erklären, was ist der Unterschied zwischen event.preventDefault() und event.stopPropagation()?

Ich habe eine Tabelle und innerhalb dieser Tabelle habe ich ein IMG-Tag.

Wenn ich auf das IMG-Tag klicke, möchte ich ein Popup sehen.

Aber ich möchte auch die Auswahl mehrerer Zeilen stoppen, so verwende ich:

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

Wenn ich die JS-Code verwenden, wird das Popup nicht angezeigt;

Wenn ich den Js-Code lösche, funktioniert das Popup.

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

Warum?

Answer 1

Ich bin kein Experte Javascript, aber soweit ich weiß:

stopPropagation verwendet wird, das Ereignis, um sicherzustellen, um die Kette nicht sprudeln. z.B. Ein Klick auf ein <td> Tag würde auch Klickereignisse auf seine Eltern <tr> auslösen, und dann sein Elternteil <table>, etc. stopPropagation verhindert, dass dies geschieht.

preventDefault wird verwendet, um die normale Aktion eines Elements, z. preventDefault in einem Klick-Handler auf einen Link würde den Link zu stoppen aufhören, oder auf eine Schaltfläche zum Senden würde das Formular gestoppt werden.

Answer 2

Ereignis preventDefault From W3C:

Die Event.preventDefault() Methode stoppt die Standardaktion eines Element aus geschieht. Zum Beispiel:

Prevent einer Schaltfläche zum Senden von einem Formular stopPropagation From W3C einen Link von nach der URL

Ereignis verhindern einreichen:

Die event.stopPropagation() -Methode das Sprudeln aufhört Ein Ereignis an Elternelemente, wodurch verhindert wird, dass alle übergeordneten Ereignishandler ausgeführt werden.

Answer 3

• stopPropagation auf ein Kind wird dieses Ereignis stoppen geschieht auf den Eltern (die gesamten Vorfahren)
• preventDefault auf ein Kind wird die Veranstaltung auf dem Kind stoppen, aber es wird passieren, es ist Elternteil (und die Vorfahren auch!)

Jetzt in Ihrem Code, der die Eltern ist? Welches ist das Kind?img ist Kind tr ist Elternteil (gut Großeltern um ehrlich zu sein), also raten Sie, wo der stopPropagation Code sein sollte.