preventDefault in Javascript

[mostafatalebi]

Hello everybody

 

I have searched the net but have not understood the following question's answer perfectly.

 

What is the difference between the

event.preventDefault();

and

event.stopPropagation();

in Javascript as it seems both of them deals with the default action of an element.

 

Thanks in advance

Edited July 20, 2013 by mostafatalebi

[Irate]

preventDefault() is obvious - the default action associated with an event is prevented. In case of a click on an <a> tag, you will not be redirected to another page.

 

stopPropagation() stops the click event from propagating up to a higher hierachy element - also called "bubbling" - and prevents the click action from accidentally triggering other clicks.

[mostafatalebi]

thanks very much.

[kicken]

For a demonstration, check: http://jsfiddle.net/9TJJP/

 

Clicking either of the icons on the end will give you an alert saying you clicked the link, but no navigation occurs because the attached event handler calls preventDefault().

 

Clicking the middle icon follows the link as expected and shows no alert. Because the event handler for it calls stopPropagation, the event handler attached to the parent A tag is never executed.