User Experience Engineering

Friday, August 29, 2008


Stop Firefox 3.1 Event Propagation

Some legacy JavaScript code broke in Firefox 3.1 recently. An endless loop was formed, causing a "too much recursion" error and browser crashes. Here's a brief summary of how the loop was formed, and how I broke out of it. I grossly simplified the code for the example.

this.htmlBuffer += '<input type="radio" onclick="doStuff();repaintForm();"';
this.htmlBuffer += '/>';
// Some other inputs
someDiv.innerHTML = this.htmlBuffer;

All tested browsers that came before Firefox 3 stopped propagation of the click event. Firefox 3 continued to propagate the click event after the form was repainted, so it effectively added a new event listener with each iteration.

I did some reading on the subject, at whirlpool and eyeOS. I tried various means of stopping the event, including...

e.stopPropagation(); // Mozilla
e.preventDefault();  // Mozilla
e.cancelBubble = true;// IE
e.returnValue = false;// IE

None worked.

The Solution

Adding "return false;" to the XHTML text of the onclick stopped event propagation in Firefox 3. It had no ill effects in Firefox 2, Safari 3, IE7, or IE6.

this.htmlBuffer += '<input type="radio" onclick="doStuff(this);repaintForm();return false;"';
this.htmlBuffer += '/>';
// Some other inputs
someDiv.innerHTML = this.htmlBuffer;

Clearly, a better solution would include use of DOM methods to construct objects, instead of innerHTML. However, this solution fixed the problem in a hurry. If your existing application seems to get caught in an endless loop only in Firefox 3, the "return false" solution may help.

Labels: , ,


March 2006   May 2006   July 2006   August 2006   January 2007   March 2007   April 2007   August 2007   March 2008   April 2008   August 2008   April 2010   May 2010   July 2010   September 2010   April 2011   November 2012   March 2013   December 2013  

This page is powered by Blogger. Isn't yours?