Today, I need to discuss the effect of return false usage in an event handler if you are using jQuery.
I am providing a simple HTML content to check this out in real time. Here is our HTML content.
<!DOCTYPE html>
<html lang="">
<body>
<div class="link-holder" id="link-holder">
<a class="my-link" id="my-link" href="index.php">I am link</a>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>
Nothing fancy here. Our html page contains a simple attribute tag enclosed by a div container. We added jQuery from Google CDN and also a custom script file js/script.js.
Default Working of Event Handlers
Our scipt.js file looks like this:
$(function ($) {
var $a = $('.my-link');
var $div = $('.link-holder');
$a.on('click', function () {
$(this).text('Hi From First');
});
$a.on('click', function () {
$(this).text('Hi From Second');
});
$div.on('click', function () {
$a.text('Hi From Third');
});
});
As you can see it registers three click event handlers. Two of them for attribute tag and one for the container div tag.
When we execute and click on the attribute link, what would you think of the result? If you are thinking it would be Hi From Third, you are wrong. The page will get reloaded and the text would be again I am link.
The reason for this is simple. Even though it registers three event handlers for the click event, none of it stopping the default behaviour of attribute tag. So after executing all the event handlers, it will go on with its default behaviour which is loading the href page mentioned.
The Effect: Stopping Default Behaviour
If you want to stop this, you can add event.preventDefault() in any of the event handlers. This will stop the default behaviour attribute tag. To demonstrate this, we are changing the second event handler to below:
$a.on('click', function (event) {
event.preventDefault();
$(this).text('Hi From Second');
});
Now if you reload the page and click on the attribute tag, then you will see below result
As you can attribute tag default behavior is no more working and it shows the last executed event handlers output.
Now we are doing changing the code like this below:
$(function ($) {
var $a = $('.my-link');
var $div = $('.link-holder');
$a.on('click', function () {
$(this).text('Hi From First');
});
$a.on('click', function () {
$(this).text('Hi From Second');
});
$div.on('click', function () {
$a.text('Hi From Third');
return false;
});
});
Here the only difference is, we are adding return false in the 3rd event handler. Now if you reload the page and click on the attribute tag, you will see the same output as you see above.
That’s cool. We now understood adding a return false prevents the default behaviour, just like event.preventDefault() does.
The effect: Stopping Event Propagation
Now let us put the same return false statement in the second event handler as you can see below:
$(function ($) {
var $a = $('.my-link');
var $div = $('.link-holder');
$a.on('click', function () {
$(this).text('Hi From First');
});
$a.on('click', function () {
$(this).text('Hi From Second');
return false;
});
$div.on('click', function () {
$a.text('Hi From Third');
});
});
The result is shown below:
Ah.. that’s interesting. It looks like the third event handler didn’t execute at all. so return false stopping next event handlers from execution? It looks like so. But wait, Let us add the return false in the first event handler in order to make sure it.
$(function ($) {
var $a = $('.my-link');
var $div = $('.link-holder');
$a.on('click', function () {
$(this).text('Hi From First');
return false;
});
$a.on('click', function () {
$(this).text('Hi From Second');
});
$div.on('click', function () {
$a.text('Hi From Third');
});
});
If you check the output now, you will see Hi From Second. Exactly what you see above!!. This mean it executes all event handlers that are bind on attribute tag, but not the event handler that bind on the container div.
Whenever an event is fired on the element, the browser will fire the same event for all of its parent elements. This is known as event propagation. So here return false stops the event propagation. But, it will keep on executing event handlers bind on the same element though!!!
Effect of return; or return true
If you try other return formats such as return; or return true, you will observe that there is no effect for them. For example, if you add any one of it in the first event handler and try out, you will see that page will reload again (default behaviour of attribute tag).
Is there any effect in pure javascript if use return false
There are no such “side effects” if we use pure javascript for it. For example , the below code:
$(function () {
var a = document.getElementById('my-link');
var div = document.getElementById('link-holder');
a.addEventListener('click', function (event) {
event.target.innerText = 'Hello From First';
return false;
});
a.addEventListener('click', function (event) {
event.target.innerText = 'Hello From Second';
});
div.addEventListener('click', function () {
a.innerText = 'Hello from Third';
});
});
You will see the output as the page reload again. So there is no effect for return false in pure javascript.