Difference between event.preventDefault(), event.stopPropagation() and return false in jquery


Let me start by stating the behavior of all three when used in jquery event handling:

event.preventDefault(): Prevents the default action of the event from triggering. Does not stop the event propagation to parent DOM elements.
event.stopPropagation(): Prevents the default action of the event from propagating to parent DOM elements.
return false: Does what both of the above methods can do.

Let’s try to understand with examples:

Example 1:
<div onclick='executeParent()'>
<a href='http://google.com'>Click here to visit google.com</a>
</div>
<script>
$('a').click(function(event) {
$('a').text('Click event is going to execute');
$('a').contents().unwrap();
});
function executeParent() {
alert('here');
}
</script>

If you execute the code above, first you will get the javascript alert as the parent div calls the executeParent() javascript function. Next you will see the hyperlink ‘Click here to visit google.com‘ replaced by the text ‘Click event is going to execute‘ and immediately you will be redirected to google.com.

Example 2:
<div onclick='executeParent()'>
<a href='http://google.com'>Click here to visit google.com</a>
</div>
<script>
$('a').click(function(event) {
event.preventDefault();
$('a').text('Click event prevented');
$('a').contents().unwrap();
});
function executeParent() {
alert('here');
}
</script>

If you execute the code above, first you will get the javascript alert as the parent div calls the executeParent() javascript function. Next you will see the hyperlink ‘Click here to visit google.com‘ replaced by the text ‘Click event prevented‘ and you will not be redirected to google.com. This is due to event.preventDefault() method we used to prevent the default click action to be triggered.

Example 3:
<div onclick='executeParent()'>
<a href='http://google.com'>Click here to visit 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>

If you execute the code above, the function executeParent() will not be called and you will not get the javascript alert this time. This is due to us having prevented the propagation to the parent div using event.stopPropagation() method. Next you will see the hyperlink ‘Click here to visit google.com‘ replaced by the text ‘Click event is going to be executed‘ and immediately you will be redirected to google.com. This is because we haven’t prevented the default click action from triggering this time using event.preventDefault() method.

Example 4:
<div onclick='executeParent()'>
<a href='http://google.com'>Click here to visit google.com</a>
</div>
<script>
$('a').click(function(event) {
event.preventDefault();
event.stopPropagation();
$('a').text('Click event prevented');
$('a').contents().unwrap();
});
function executeParent() {
alert('here');
}
</script>

If you execute the code above, the function executeParent() will not be called and you will not get the javascript alert. This is due to us having prevented the propagation to the parent div using event.stopPropagation() method. Next you will see the hyperlink ‘Click here to visit google.com‘ replaced by the text ‘Click event prevented‘ and you will not be redirected to google.com. This is because we have prevented the default click action from triggering this time using event.preventDefault() method.

Example 5:
<div onclick='executeParent()'>
<a href='http://google.com'>Click here to visit google.com</a>
</div>
<script>
$('a').click(function(event) {
$('a').text('Click event prevented');
$('a').contents().unwrap();
return false;
});
function executeParent() {
alert('here');
}
</script>

If you execute the code above, you will get the exact same results as example 4. This due to return false statement doing the job of both event.preventDefault() and event.stopPropagation() methods.

Hope these examples are clear. Try executing all these examples in a html file to see how they work.

Reference – Talkora

Advertisements

5 thoughts on “Difference between event.preventDefault(), event.stopPropagation() and return false in jquery

  1. I like this site its a master peace ! Glad I observed this on google. The definition of a beautiful woman is one who loves me. by Sloan Wilson. ekedagcaaekd

  2. I think this is one of the most important info for me. And i am glad reading your article. But wanna remark on few general things, The web site style is ideal, the articles is really excellent D. Good job, cheers kegedkebfced

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s