WebReference.com - Part 2 of Chapter 6 from Dynamic HTML: The Definitive Reference, 2nd Edition. From O'Reilly (1/8).

Preventing Default Event Actions

[The following is the conclusion of our pair of excerpts from chapter 6 of the O'Reilly title, Dynamic HTML: The Definitive Reference, Second Edition.]

It is not uncommon to script an event handler to execute statements immediately prior to an element carrying out its normal activity in response to a user action. For example, a form's text field validation typically operates in response to the onsubmit event of the form element. Without any kind of event handler, a form element obeys the submit-type input button, and sends the form's contents to the URI specified by the action attribute. But if you bind an onsubmit event handler to that form element, and if the validation routines spot an error (e.g., a required text box is empty), the script can alert the user and prevent the default submission action from taking place. Many other elements and their events can benefit from this script technique.

You have several ways prevent an element's default action, depending on the event binding style you use and the browsers you need to support. Some techniques work across all scriptable browsers.

Setting the return Value

When your event handlers are in the form of element attributes, you can cancel the element's default action if the last statement of the event handler assignment statement evaluates to return false. This is different from simply having the handler function end with return false. The return statement must be in the value assigned to the event handler attribute.

The easiest way to implement this approach is to include a return statement in the event handler itself, while the function invoked by the handler returns true or false based on its calculations. For example, if a form requires validation prior to submission, you can have the onsubmit event handler invoke the validation routine. If the routine finds a problem somewhere, it returns false and the submission is canceled because the entire event handler expression evaluates to return false; otherwise, the function returns true and the submission proceeds as usual. Such a form element looks like the following:

<form method="POST" action="http://www.megaCo.com/cgi-bin/entry" onsubmit="return validate(this);">

This technique also allows you to have a link navigate to a hardcoded URL for nonscriptable browsers, but execute a script when the user has a scriptable browser:

<a href="someotherURL.htm" onclick="doNavigation(); return false;">...</a>

Here, the return false statement is set as the final statement of the event handler; it does not have to trouble the called function for a return value because all scriptable browsers are to follow the scripted navigation path.

If you use object property event binding, the coding is not altogether straightforward. By and large, IE lets the return statement of the function govern the default execution, provided you return true or false. Netscape 6.2, however, doesn't obey return statements for this type of event binding due to a bug that is fixed in later versions.