Interesting JavaScript quirk w/ stopPropagation()

November 05, 2007

I'm developing my app, using Firefox, and in one of the files, I have the following javascript: el = document.getElementById( "frmProcess" ); addEvent( el, "submit", validate ); Simple enough, right? I have a form called "frmProcess", and when that form's "submit" event fires off, I want the function validate() to fire off as well. That part works fine, and as you may have guessed, validate(), well, validates some data in the given form. If the validation fails, it calls this line of code: evt.stopPropagation(); ...which doesn't work. The "submit" event doesn't stop running. The form happily submits itself as if nothing went wrong. After somedebugging I found 2 things: 1. Changing the offending line of code from "evt.stopPropagation();" to "evt.preventDefault();" fixes the issue. 2. evt.stopPropagation() worked just fine on other events (blur, click, etc). But if I attach the "submit" event, it bombs. Now the million dollar question is: WHY!?!?! Firefox didn't report an error, and nothing else seemed to be causing an issue. So WHY in the name of all that's good does a "submit" event have to be handled differently than other events? Is this a bug in Firefox? Some valid DOM thing that I just can't find documentation for? --n