Hello Readers,

event.PreventDefault() : In jquery event.preventdefault is used to prevent the current action or the default action event from occuring or happening or triggering. It does not stop the propagation to parent DOM elements.

For Example :

<div onclick='executeParent()'>
<a href='http://google.com'>google.com</a>
</div>
<script>

$('a').click(function(event) {

event.preventDefault();

$('a').text('Click event prevented');
$('a').contents().unwrap();

});

function executeParent() {
alert('here');
}
</script>

In the above code,first we call the function executeParent() it's a javascript function and get the alert as the parent div. Next, we see the anchor tag i.e hyperlink 'google.com' replaced by the text 'Click event prevented' and you not be redirected to google.com due to the jquery method event.preventDefault() (because it prevent the default or current click action from occuring or trigerring).

event.stopPropagation() : In jquery event.stopPropagation() prevents the current action or default action of the event from propagating as well as propagating to parent DOM elements.

For Example :

<div onclick='executeParent()'>
<a href='http://google.com'>google.com</a>
</div>

<script>
$('a').click(function(event) {
event.stopPropagation();

$('a').text('Click event is going to be executed');
$('a').contents().unwrap();
});

function executeParent() {
alert('here');
}
</script>

In the above code,the javascript function executeParent() will not be called and you will not get the alert this time due to using the event.stopPropagation() method. It stop the propagation to the parent div. Next, you will see the anchor tag i.e hyperlink 'google.com' replaced by the text 'click event is going to be executed' and you will be redirected to google.com immediatedly.

return false : It is the alert native of the method event.preventDefault and event.stopPropagation.

For Example :

function() {
  return false;
}

// IS EQUAL TO

function(e) {
  e.preventDefault();
  e.stopPropagation();
}

For Example :

<div onclick='executeParent()'>
<a href='http://google.com'>google.com</a>
</div>

<script>

$('a').click(function(event) {
$('a').text('Click event prevented');

$('a').contents().unwrap();
return false;

});

function executeParent() {
alert('here');
}
</script>

In the above code,the javascript function executeParent() will not be called and you will not get alert message due to the prevented propagation to the parent div event.stopPropagation() method.

Next, you will see the anchor tag i.e hyperlink 'google.com' replaced by the text 'click event prevented' and you will not be redirected to google.com (because we have prevent the curent action or default action by using event.preventDefault() method).

So, in the above code we use the return false will same as stop as well as default propagation in jquery methods.