event.preventDefault vs event.stopPropagation [duplicate]

Question

This question already has an answer here:

• What's the difference between event.stopPropagation and event.preventDefault? 7 answers

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?

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.

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.

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.