Jump to content

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


spence911
Go to solution Solved by kicken,

Recommended Posts

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?

Link to comment
Share on other sites

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 )

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

  • Solution

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.
Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • 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.