event.preventDefault vs event.stopPropagation [duplicate]

Question

Can someone explain what's the difference between event.preventDefault() and event.stopPropagation()?

I have a table and within that table I have an img tag.

When I click the img tag, I want to see a popup.

But I also want to stop the selection of multiple rows, so I use:

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

When I use the js code, the popup does not appear;

If I delete the js code, the popup works.

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

Why?

Enantiomorph

This will help you davidwalsh.name/javascript-events – Recommend

Please show your html structure so we know where the image is with relation to the table structure – Michaels

It's too late to stop the selection on click; use mousedown. – Ziegler

Answer 1

I am not a Javascript expert but as far as I know:

stopPropagation is used to make sure the event doesn't bubble up the chain. eg. a click on a <td> tag would also fire click events on it's parent <tr>, and then its parent <table>, etc. stopPropagation prevents this from happening.

preventDefault is used to stop the normal action of an element, eg. preventDefault in a click handler on a link would stop the link being followed, or on a submit button would stop the form being submitted.

Audre

@CrisimIlNumenoreano your comment makes no sense. sevenseacat's answer looks 100% correct to me and can be checked with the answers on the dup question as well as with the jQuery documentation for event.preventDefault() and event.stopPropagation(). – Blades

does stopPropagation also stop the capture phase? – Longfaced

I think the confusion around these two functions (three if you count stopImmediatePropagation) is a doubt about whether stopping propagation automatically prevents default too. It seems like it might. – Monteiro

Answer 2

• stopPropagation on a child will stop that event from happening on the parent (the entire ancestors)
• preventDefault on a child will stop the event on the child but it will happen on it's parent (and the ancestors too!)

Now in your code which is the parent? which is the child? img is child tr is parent(well grandparent to be honest), So guess where the stopPropagation code should be.

Bisulfate

I get the impression this is wrong. I think stopPropagation DOES NOT stop the action of the child from happening? – Polo

You're probably talking about preventDefault, but my comment was aimed at the stopPropagation explanation. User rps has corrected his answer after my comment. – Polo

@Trisped, @Polo is right, the example you're saying seems to be of preventDefault's. And initially I made the mistake of saying that the stopPropagation will stop any child's events too which was later corrected by @user1884155. – Bisulfate

@Polo Sorry, copy paste error. Should have been preventDefault as you said. – Blades

Answer 3

Event preventDefault From W3C:

The event.preventDefault() method stops the default action of an element from happening. For example:

Prevent a submit button from submitting a form Prevent a link from following the URL

Event stopPropagation From W3C:

The event.stopPropagation() method stops the bubbling of an event to parent elements, preventing any parent event handlers from being executed.

Kastroprauxel