SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Evangelist winterheat's Avatar
    Join Date
    Aug 2007
    Posts
    508
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    stopping default action using "return false" not recommended?

    i think conventional usage of Javascript is to use "return false" to stop the default action, be it a form for submit, a link, or a text input field.

    when nothing is returned or when true is returned, then the default action is taken.

    example like on http://www.0011.com/test/test_return_false.html

    however, i found that this is not so widely mentioned or documented in some books. such as in Professional Javascript by Nicholas Zakas (2005) p. 278, he recommends using

    oEvent.returnValue = false; // for IE

    and

    oEvent.preventDefault(); // for Firefox

    (i don't have a copy of Javascript Definitive Guide with me right now... so I wonder if it documents returning false and true or not).

    why not just use return false or true to do that? won't that work in almost all browsers?

  2. #2
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by winterheat View Post
    i think conventional usage of Javascript is to use "return false" to stop the default action, be it a form for submit, a link, or a text input field.
    That works if you have a "DOM0" event handler, but not if you register a DOM2 event listener.

    Quote Originally Posted by winterheat View Post
    oEvent.preventDefault(); // for Firefox
    That's not just for Firefox, but for all DOM2-compliant browsers (including Opera and Safari).

    The old-school way:
    Code JavaScript:
    myElement.onclick = function () {
        doSomething();
        return false;
    }

    The DOM2 way:
    Code JavaScript:
    /* DOM2-compliant browsers */
    if (myElement.addEventListener) {
        myElement.addEventListener(
            "click",
            function (e) {
                doSomething();
                e.preventDefault();
                e.stopPropagation();
            },
            false);
    } else if (myElement.attachEvent) { /* IE */
        myElement.attachEvent(
            "onclick",
            function () {
                doSomething();
                window.event.returnValue = false;
                window.event.cancelBubble = true;
            });
    }
    Birnam wood is come to Dunsinane

  3. #3
    SitePoint Evangelist winterheat's Avatar
    Join Date
    Aug 2007
    Posts
    508
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    so the DOM0 is 2 lines and the DOM2 way is 10 lines... so we have a divergence of method rather than convergence huh. i suppose it can be made into common code or as a function... or any javascript framework that uses it will take care of it automatically.

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    The benefit of the advanced event registration is that the event for a single element can have multiple functions attached on to it. It's quite rare that this is required though, so it can be a good practice to stay with the standard event registration until circumstances dictate otherwise.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by pmw57 View Post
    It's quite rare that this is required though
    It's not all that uncommon to have multiple external JavaScript files that all want to register a listener for window.onload.

    Besides, the DOM2 event model allows us to register listeners for the capture phase, which you can't do with the old event handler model.

    @winterheat: The only reason the second example is so long is because Internet Explorer doesn't support the same standards as everybody else. A DOM2 equivalent to the first example, without catering for IE, looks like this:
    Code JavaScript:
    myElement.addEventListener(
        "click",
        function (e) {
            doSomething();
            e.preventDefault();
        },
        false);
    Birnam wood is come to Dunsinane


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •