Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder ellisd5's Avatar
    Join Date
    Jun 2002
    Location
    Uk
    Posts
    160
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Firefox not bubbling form element

    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,

    Cheers,
    Dale
    Dale Ellis
    __________________

  • #2
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    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:

    http://www.quirksmode.org/js/events_order.html
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #3
    Regular Coder ellisd5's Avatar
    Join Date
    Jun 2002
    Location
    Uk
    Posts
    160
    Thanks
    5
    Thanked 0 Times in 0 Posts
    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...

    Drag
    Code:
    // 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>";
    }
    Drop
    Code:
    // remove veil, FireFox, bug fix
    if (navigator.userAgent.indexOf("Firefox") != -1) {
    	var veilDivs = dragObject.getElementsByTagName("div");
    	veilDivs[veilDivs.length-1].parentNode.removeChild(veilDivs[veilDivs.length-1]);
    }
    Not that elegant but I only need to support IE and FF so this seems to do the trick.

    Cheers,
    Dale
    Dale Ellis
    __________________

  • #4
    Regular Coder ellisd5's Avatar
    Join Date
    Jun 2002
    Location
    Uk
    Posts
    160
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Solved it now )

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

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    
    	<title>OnMouseUp test</title>
    
    	<script>
    		function test() {
    			alert("ON MOUSE UP");
    		}
    
    		document.onmouseup = test;
    
    
    	</script>
    
    </head>
    <body>
    
    	<h1>On mouseup test</h1>
    
    	<input type="text" name="blah" value="" disabled="disbaled" />
    
    </body>
    </html>
    It seems IE fires the event when disabled, Firefox doesn't.

    Cheers,
    Dale
    Dale Ellis
    __________________


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •