Interrupting Prototype handler, alert() vs event.stop()

Posted by lxs on Stack Overflow See other posts from Stack Overflow or by lxs
Published on 2010-04-14T08:32:18Z Indexed on 2010/05/15 5:04 UTC
Read the original article Hit count: 310

Here's the test page I'm using. This version works fine, forwarding to #success:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html><head>
<script type="text/javascript" src="prototype.js"></script>
</head><body>

<form id='form' method='POST' action='#fail'>
    <button id='button'>Oh my giddy aunt!</button>

    <script type="text/javascript">
    var fn = function() {
        $('form').action = "#success";
        $('form').submit();
    }
    $('button').observe('mousedown', fn);
    </script>
</form>

</body></html>

If I empty the handler:

var fn = function() {
}

The form is submitted, but of course we are sent to #fail this time.

With an alert in the handler:

var fn = function() {
    alert("omg!");
}

The form is not submitted. This is awfully curious.

With event.stop(), which is supposed to prevent the browser taking the default action:

var fn = function(event) {
    event.stop();
}

We are sent to #fail.

So alert() is more effective at preventing a submission than event.stop(). What gives?

I'm using Firefox 3.6.3 and Prototype 1.6.0.3. This behaviour also appears in Prototype 1.6.1.

© Stack Overflow or respective owner

Related posts about prototype

Related posts about javascript-events