[thelist] javascript default event handlers, default events. [TIP]

Jeffery To jeffery.to at gmail.com
Tue Aug 30 02:57:43 CDT 2005


On 8/30/05, VOLKAN ÖZÇELİK <volkan.ozcelik at gmail.com> wrote:
> In IE, the scenario will be as expected: if there is a validation
> error; a message will be alerted, the method will return false and
> form FrmPage will NOT be submitted.
> 
> However in Firefox, Mozilla, Netscape and Opera (i.e. the rest of the
> world) THE FORM WILL BE SUBMITTED even when FrmPage_submit function
> returns false.

There are ways to cancel the default action associated with an event,
like form submission, in both W3C and Microsoft event registration
models.

In the W3C model (addEventListener), the event passed to each listener
has the method preventDefault(). When this is called by one or more
event listeners, the default action is cancelled. [1]

In the Microsoft model (attachEvent), returning false works, as you've
seen, when you have just one listener registered to the event. When
you have more than one listener registered, things get a bit more
complicated. In the 15 minutes I spent on experimentation (I usually
avoid the Microsoft model), it seems that of the set of listeners that
return a value, the default action is cancelled if the value returned
by the last listener executed is false. I would expect it to take the
return values of all listeners and do a logical AND, but that does not
appear to be the case.

Microsoft also provided another way to cancel the default action, by
setting the returnValue property of the event object to false. [2]
Again, this depends on the order of excution of listeners, i.e. if
different listeners set returnValue to different values, then it's the
value set by the last listener excuted that matters. Even though the
documentation at MSDN says that the returnValue property takes
precedence over the actual return value, in practice it seems that if
either value is false then the default action is cancelled.

A cross-browser method to cancel the default action would be:

function listener(e) {
    if (typeof e == 'undefined') {
        e = window.event;
    }

    /* stuff */

    if ( /* cancel default action */ ) {
        if (typeof e.preventDefault == 'function') {
            e.preventDefault();
        }
        else {
            e.returnValue = false;
        }
    }

    /* more stuff */
}

A few notes:

A quick test shows that the above method works using the traditional 
model (foo.onclick = ...) in Mozilla, Explorer 5+ and Opera. Not sure
about Safari. Contrast with returning false, which doesn't work in the
W3C model.

The above method may not work when setting window.status during the
mouseover event of a link. (This is the exception in the traditional
model, where you have to return true to prevent the link href from
overwriting the status bar text.) I haven't done enough testing to
pinpoint the problem.

HTH,
Jeff [3]


[1] http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/events.html#Events-flow-cancelation
[2] http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/returnvalue_1.asp
[3] How do I set verbosity property to "concise" in my personality stylesheet?

-- 
Jeffery To
www.thingsthemselves.com


More information about the thelist mailing list