View Full Version : Firefox not bubbling form element

09-14-2010, 05:25 PM
Hi all,

At work I have written a form builder which is all drag and drop.

The issue I have is with ending the drop, I have no problems in IE. The drag is controlled by the onmousemove and onmouseup events for the document body.

The trouble is, in Firefox, if the cursor is over a form item, then the onmouseup event doesn't fire and therefore the drag doesn't end.

There is no problem with other items, other HTML items, tables, list, divs, then all bubble the event to the body.

Anyone ever come across this, if so how did you get round it.

Do I need to manually make form elements bubble in Firefox? Maybe I should just stick a div opacity 0 over the drag objects and make that call the body's onmouseup event.

Any thoughts much appreciated,


09-14-2010, 07:20 PM
Mozilla has a different Event Model, in which events are not bubbled but captured and bubbled. See a good article (and some advices to stop the events propagation) at:


09-15-2010, 11:45 AM
Thanks KOR,

yea I was aware of those API's the thing is with my scenrio, its that there are no other onmouseUp events other than at the body level so the event should alway fire from the body, there is no cancel bubble in place around the onmouseup.

My only thought now is that firefox input tag must not support the onmouseup event but I can't find evidence from googling to prove or disprove this.

Anyway, as a draged object is positioned absolute i have just put a see through veil of it...


// place a veil over all elements so that FireFox doesn't block the onmouseup event reaching the document body
if (navigator.userAgent.indexOf("Firefox") != -1) {
dragObject.innerHTML += "<div style='position:absolute; left:0; top:0; bottom:0; right:0; background-color:#FF0000; filter:alpha(opacity=0); -moz-opacity:0; -khtml-opacity:0; opacity:0;'></div>";


// remove veil, FireFox, bug fix
if (navigator.userAgent.indexOf("Firefox") != -1) {
var veilDivs = dragObject.getElementsByTagName("div");

Not that elegant but I only need to support IE and FF so this seems to do the trick.


09-15-2010, 11:55 AM
Solved it now :o)

Did a little test harness, I didn't mention before, the input elements in the drag objects are disabled.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<title>OnMouseUp test</title>

function test() {
alert("ON MOUSE UP");

document.onmouseup = test;



<h1>On mouseup test</h1>

<input type="text" name="blah" value="" disabled="disbaled" />


It seems IE fires the event when disabled, Firefox doesn't.