#stoppropagation

Fixed What's the difference between event.stopPropagation and event.preventDefault? #dev #it #asnwer

What’s the difference between event.stopPropagation and event.preventDefault?

They seem to be doing the same thing… Is one modern and one old? Or are they supported by different browsers?

When I handle events myself (without framework) I just always check for both and execute both if present. (I also return false, but I have the feeling that doesn’t work with events attached with node.addEventLi…

What’s the difference between event.stopPropagation and event.preventDefault?

They seem to be doing the same thing… Is one modern and one old? Or are they supported by different browsers?

When I handle events myself (without framework) I just always check for both and execute both if present. (I also return false, but I have the feeling that doesn’t work with events attached with node.addEventLi…

During my talk at the second Manchester jQuery meetup, I used the .preventDefault() markup in my click event handler.

$('a').click( function(event) { event.preventDefault(); });

Upon inserting this, I was asked what the difference was between using this method and using return false. I knew I had read about this particular use case before, and clearly some of it had stuck as I was still using .preventDefault() but my answer pretty much boiled down the fact that this is my prefered method.

My reasoning was that it made more sense to me on reviewing my code, when I see return false for example, I am automatically assuming that I am trying to escape out of a loop or returning the value false.

Whereas if I see .preventDefault() I assume that I am trying to prevent the default action. However, as I'd been asked the question, I decided to dig a little deeper.

In jQuery, if a developer stops the default behaviour by using return false they are actually getting a little bit more than they bargained for.

Not only does this call have to take place right at the end of the resulting function they are also running both the .preventDefault() and the .stopPropagation() javascript calls.

$('a').click( function(event) { return false; });

is equivalent to

$('a').click( function(event) { event.preventDefault(); event.stopPropagation(); });

To understand what this means, let's look at the W3C definition for these calls:

.preventDefault()

If an event is cancelable, the preventDefault method is used to signify that the event is to be canceled, meaning any default action normally taken by the implementation as a result of the event will not occur. If, during any stage of event flow, the preventDefault method is called the event is canceled. Any default action associated with the event will not occur. Calling this method for a non-cancelable event has no effect. Once preventDefault has been called it will remain in effect throughout the remainder of the event's propagation. This method may be used during any stage of event flow.

.stopPropagation()

The stopPropagation method is used prevent further propagation of an event during event flow. If this method is called by any EventListener the event will cease propagating through the tree. The event will complete dispatch to all listeners on the current EventTarget before event flow stops. This method may be used during any stage of event flow.

Source: http://goo.gl/VBpEp