Firefox canceling problem solved

I'd like to thank Johannes Hölzl, who pointed out my stupid mistake regarding canceling form submission in Firefox:

The
ECMAScript binding for DOM Events
says that the EventListener (which is the function "cancel") hasn't any returnvalue. But you get as parameter an Event object, where you can call "stopPropagation()" or "preventDefault()".

So I replaced this code:

function cancel()
{
  return false;
}

with this:

function cancel(e)
{
  if (e && e.preventDefault)
    e.preventDefault(); // DOM style
  return false; // IE style
}

and it works. I updated the test page accordingly.

Thanks a lot, Johannes!

Posted on April 17, 2005 in


Comment by Graham

December 8, 2005 - 14:42

just saved my behind too. thanks!


Comment by jdavin

January 6, 2006 - 01:45

Me too, thanks!


Comment by sosa

February 2, 2006 - 22:58

Ahh my rear part is saved too. Thankyou very much.


Comment by John Nicholls

March 30, 2006 - 23:26

You're a star. Saved me hours of frustration. Thanks


Comment by Mickey

May 1, 2006 - 14:24

Thanks a million Gerd. I'd been trying all sorts, cancelBubble, etc, but tried this and it worked first time!

Cheers

Mickey


Comment by Anonymous

May 31, 2006 - 06:43

Really appreciate u. My problem is solved.


Comment by Philip

July 23, 2006 - 13:07

how's that work ?
what is e ?
when can i call that function ?

please email me.

Thanks


Comment by Mats

September 14, 2006 - 08:26

Hi, thanks for tips. Just what I needed to get it to work in firefox.

Btw, I stumbled upon this page:
http://talideon.com/weblog/2005/03/js-memory-leaks.cfm

It's a event manager that minimizes memory leaks involved in using closures with javascript.


Comment by Kevinin

October 19, 2006 - 18:48

Thank you soooo much!


Comment by doug

October 24, 2006 - 09:05

Fantastic!


Comment by Peter

November 16, 2006 - 01:45

Thanks from me too, been driving me mad


Comment by Robert Spear

January 17, 2007 - 16:27

Hello,
I have been unable to get the following code segment to cancel a page submit on a click action for a navigation link on a .jsp file. I am curious if the success of this code is dependent on the type of web page that implements it. i.e, is there a difference between standard HTML vs JSP?
When I click the Command Link the preventDefault code is executed as expected but does not prevent the page from navigating to next page.
Any insight you can provide would be very much appreciated.

function callValidation(obj, e){ Call to another function in a .js file that tests page input... If that call returns false then run the following code...{ if (e && e.preventDefault){ e.preventDefault(); // DOM style return false; // IE style } } else{return true;} }

Here is the code segment in the .jsp file that calls the function above...
<td> <h:commandLink styleClass="action-link" id="linkSaveContinue" action="#{pc_MyJavaClassName.doLinkSaveContinueAction}" title="Click here to save page data and navigate to next page." onmousedown="return callValidation(this, event);"> <h:outputText id="textSaveCont" styleClass="text" value="Save/Continue" </h:outputText> </h:commandLink> </td>


Comment by Anonymous

February 22, 2007 - 11:55

Thankyouthankyouthankyou. After hours of trial and error, I was really losing the will to live. I even contemplated adding an onclick="return false;" to my code - particularly ironic when you consider that I attach every event via onload in order to make it unobtrusive.
I have to say that IE's handling seems to be far more obvious - at least it doesn't fly in the face of 10 years worth of Javascript best practice.

f.


Comment by Anonymous

March 23, 2007 - 23:42

Thank you for this helpful tip. It worked fine. It saved lot of our time. Thank you again for this posting


Comment by SchizoDuckie

June 5, 2007 - 12:15

Thanks for saving me some headaches while writing my generic form validator.

Solution example for the mootools users amongst us:

$$('FORM')[0].addEvent('submit', function(e) { new Event(e).stop(); // stopt event propagation for firefox. return this.validateAll(); }.bind(this));