SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2009
    Posts
    73
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Return False Not Preventing Default w/ addEventListener

    I was under the impression "return false" would always prevent the default action. However, for some reason it's only working for me when I use the DOM Level 0 method of attaching the event handler. When I use addEventListener, the form still submits.

    So, I have this method that works properly..

    Code:
    function init() {
         document.getElementById('contact_form').onsubmit = test;
    }
    
    function test() {
    	return false;
    }
    But when I do it this way, the form still gets submitted. Can someone please explain what I'm missing?

    Code:
    function init() {
    	document.getElementById('contact_form').addEventListener('submit', test, false);
    }
    
    function test() {
    	return false;
    }
    Oh and it's not an IE/addEventListener issue because I'm testing in Chrome & Firefox right now. I know the handler is being attached properly because I tested with an alert message.

  2. #2
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,826
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    To prevent the default when usung an eventlistener you need to use the preventDefault() method of the event and not just return false.

    The IE equivalent processing requires that you set window.eventReturnValue = false.

    Only when you use old style event handlers do you use return false.

    See JavaScript By Example - Events: Prevent Default for an example of how to get it working for all browsers.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  3. #3
    SitePoint Enthusiast
    Join Date
    Sep 2009
    Posts
    73
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by felgall View Post
    To prevent the default when usung an eventlistener you need to use the preventDefault() method of the event and not just return false.

    The IE equivalent processing requires that you set window.eventReturnValue = false.

    Only when you use old style event handlers do you use return false.

    See JavaScript By Example - Events: Prevent Default for an example of how to get it working for all browsers.
    Thanks. Not sure why I was so sure that return false would work with addEventListener, but I stand corrected.

  4. #4
    SitePoint Addict bronze trophy AllanP's Avatar
    Join Date
    Sep 2010
    Location
    Australia
    Posts
    298
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Adding to what Felgall has contributed, this will do it for you

    window.onload=function()
    { document.getElementById('contact_form').addEventListener('submit', function(evt){evt.preventDefault()}, false);
    }


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
  •