event.preventDefault vs event.stopPropagation

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?

Please show your html structure so we know where the image is with relation to the table structure — Huangism, Aug 09 '13 at 13:06
It's too late to stop the selection on `click`; use `mousedown`. — canon, Aug 09 '13 at 13:08

score 43 · Accepted Answer · answered Aug 09 '13 at 13:03

43

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.

answered Aug 09 '13 at 13:03

sevenseacat

24,699
6
63
88

@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](http://stackoverflow.com/questions/5963669/whats-the-difference-between-event-stoppropagation-and-event-preventdefault) as well as with the jQuery documentation for [event.preventDefault()](http://api.jquery.com/event.preventdefault/) and [event.stopPropagation()](https://api.jquery.com/event.stoppropagation/). – Trisped May 18 '15 at 18:51
does stopPropagation also stop the capture phase? – Harry Moreno Dec 28 '15 at 00:38
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. – doug65536 Feb 20 '16 at 06:49

score 9 · Answer 2 · edited Apr 07 '17 at 04:34

9

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.

edited Apr 07 '17 at 04:34

nembleton

2,392
1
18
20

answered Aug 09 '13 at 13:11

I get the impression this is wrong. I think stopPropagation DOES NOT stop the action of the child from happening? – user1884155 Jan 17 '14 at 18:05
You're probably talking about preventDefault, but my comment was aimed at the stopPropagation explanation. User rps has corrected his answer after my comment. – user1884155 May 19 '15 at 06:44
@Trisped, @user1884155 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. – May 19 '15 at 07:31
@user1884155 Sorry, copy paste error. Should have been `preventDefault` as you said. – Trisped May 20 '15 at 18:39

score 7 · Answer 3 · answered Aug 09 '13 at 13:09

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.

event.preventDefault vs event.stopPropagation

3 Answers3

Linked