Why do we use return true or return false after calling a JavaScript function?

spence911 · March 28, 2014

I've never understood the application of return true and return false after function calls in JavaScript. Could somebody please explain their meaning.

This is a very simple script which will create a popup window for each links in an html document.

function createPopup(e) {
    'use strict';
    
    // Get the event object:
    if (typeof e == 'undefined') var e = window.event;

    // Get the event target:
    var target = e.target || e.srcElement;

    // Create the window:
    var popup = window.open(target.href, 'PopUp', 'height=100,width=100,top=100,left=100,location=no,resizable=yes,scrollbars=yes');
    
    // Give the window focus if it's open:
    if ( (popup !== null) && !popup.closed) {
        popup.focus();
        return false; // Prevent the default behavior.
    } else { // Allow the default behavior.
        return true;
    }
    
} // End of createPopup() function.

// Establish functionality on window load:
window.onload = function() {
    'use strict';
    
    // Add the click handler to each link:
    for (var i = 0, count = document.links.length; i < count; i++) {
        document.links[i].onclick = createPopup;
    } // End of for loop.

}; // End of onload function.

The only part of the script that doesn't make sense here is the return true/false. Why do we use return true or return false after calling a JavaScript function?

gristoi · March 28, 2014

the call to the click is event driven, when you click on something a series of events bubble up through the component ( their native behaviours) when you use javascript to intercept these events you have to override their default behaviour.; so a button being what it is, if you click on it and it is ,for example, a button in a form, then if you return false it will stop the button from submitting the form.

With this in mind you will see a lot of logic saying .... if field a in form is empty ... then stop button from completing its click event.... otherwise continue with the submit ( return true )

spence911 · March 28, 2014

Thanks gristoi, if I'm coorect the native (or default behavior) of the first link is to open "popupB.html". This is what the html looks like btw:

<body>
    <p><a href="popupB.html" id="link" target="PopUp">B Link</a> (Will open in a new window.)</p>
    <p><a href="popupA.html" id="link" target="PopUp">A Link</a> (Will open in a new window.)</p>
    <script src="js/popups.js"></script>
</body>
</html>

Why do we still need a return false after the function has completed and the popup window is open?

kicken · March 28, 2014

Why do we still need a return false after the function has completed and the popup window is open?

If you override an event, you should cancel the default behavior, and that is why you need to return false (or call .preventDefault() on the event object).

In your specific case, the end result would probably be the same whether you do or don't cancel the event due to the popup name and target attribute matching. This is not always the case however so it's best to make sure you cancel the default behavior.

For instance, if the code had no target, or used the special value _blank like this:

<a href="popupA.html" id="link" target="_blank">Popup</a>
<script type="text/javascript">
document.getElementById('link').onclick=function(e){
   window.open(this.href, '_blank', 'width=100,height=100,scrollbars=1');
};
</script>

You would get two popup windows when clicking the link. One from the window.open, and one from the target=_blank.

Sign In

Why do we use return true or return false after calling a JavaScript function?

Recommended Posts

spence911

Link to comment

Share on other sites

gristoi

Link to comment

Share on other sites

spence911

Link to comment

Share on other sites

kicken

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information