web-dev-qa-db-fra.com

event.preventDefault vs event.stopPropagation

Quelqu'un peut-il expliquer quelle est la différence entre event.preventDefault() et event.stopPropagation()?

J'ai une table et dans cette table j'ai une balise img.

Lorsque je clique sur la balise img, je veux voir une fenêtre contextuelle.

Mais je veux aussi arrêter la sélection de plusieurs lignes, donc j'utilise:

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

Lorsque j'utilise le code js, le popup n'apparaît pas;

Si je supprime le code js, le popup fonctionne.

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

Pourquoi?

javascriptjquerypreventdefaultstoppropagation
16
Ionut Flavius Pogacian

Je ne suis pas un expert Javascript mais pour autant que je sache:

stopPropagation est utilisé pour s'assurer que l'événement ne se propage pas dans la chaîne. par exemple. un clic sur un <td> la balise déclencherait également des événements de clic sur son parent <tr>, puis son parent <table>, etc. stopPropagation empêche cela de se produire.

preventDefault est utilisé pour arrêter l'action normale d'un élément, par exemple. preventDefault dans un gestionnaire de clics sur un lien empêcherait le lien d'être suivi, ou sur un bouton d'envoi arrêterait l'envoi du formulaire.

36
sevenseacat
  • stopPropagation sur un enfant empêchera cet événement de se produire sur le parent (les ancêtres entiers)
  • preventDefault sur un enfant arrêtera l'événement sur l'enfant mais cela se produira sur son parent (et les ancêtres aussi!)

Maintenant, dans votre code, quel est le parent? quel est l'enfant? img est enfant tr est parent (enfin grand-parent pour être honnête), alors devinez où le code stopPropagation doit être.

7
user2587132

Événement preventDefault Du W3C:

La méthode event.preventDefault () empêche l'action par défaut d'un élément de se produire. Par exemple:

Empêcher un bouton d'envoi de soumettre un formulaire Empêcher un lien de suivre l'URL

Événement stopPropagation Du W3C :

La méthode event.stopPropagation () arrête la propagation d'un événement aux éléments parents, empêchant tout gestionnaire d'événement parent d'être exécuté.

6
Fals