User Experience Engineering

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: event propagation, Firefox 3, javascript

posted by Monte Hayward  # 3:14 PM