Jump to content

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

spence911

By spence911
in Javascript Help

Recommended Posts

spence911 Member

spence911

Posted
Posted

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 Newbie

gristoi

Posted
Posted

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 Member

spence911

Posted
  • Author
Posted

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 Prolific Member

kicken

Posted
Posted

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.

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.