请教firefox中层div的拖动问题
div.htm代码如下：
- HTML code
<html><head><title>层的拖动</title></head><body><div id="skbdiv" style="background-color:red;position:absolute;width:70px;height:50px">层的拖动</div><script type="text/javascript">var skb=document.getElementById("skbdiv");skb.onmousedown = skb_mousedown;skb.onmousemove = skb_mousemove;skb.onmouseup = skb_mouseup;var skbX,skbY;var skbmove=null;function skb_mousedown(evt){ skbmove = skb; skbmove.setCapture(); evt = evt || window.event; skbX = evt.x - skb.style.pixelLeft; skbY = evt.y - skb.style.pixelTop; }function skb_mousemove(evt){ if(skbmove == null) return true; evt = evt || window.event; var x = evt.x - skbX; var y = evt.y - skbY; skb.style.left = x.toString() + "px"; skb.style.top = y.toString() + "px";}function skb_mouseup(){ if(skbmove != null) { skbmove.releaseCapture(); skbmove = null;}}</script></body></html>在ie中没问题，但在firefox中无效，请问哪些地方需要修改？
[解决办法]
evt.clientX
evt.clientY
[解决办法]
楼上正解。
IE下，可以用event.X或者event.clientX，效果一样。
FF下，只有event.clientX和event.pageX，前者和IE的一样，后者是鼠标在整个页面中的位置，即加了滚动条位置。
[解决办法]
全部用clientX/Y
[解决办法]
- JScript code
var Browser = { MO:(typeof(document.implementation)!="undefined"&&typeof(document.implementation.createDocument)!="undefined"&&typeof(HTMLDocument)!="undefined") ,IE:window.ActiveXObject?true:false ,FF:(navigator.userAgent.toLowerCase().indexOf("firefox")>-1) ,OP:(navigator.userAgent.toLowerCase().indexOf("opera")>-1) ,Event:function(e){ if(this.IE)return window.event; else if(this.FF) return e; }}Browser.Event.leftMouseDown=function(e){ if(Browser.IE)return window.event.button==1; else if(Browser.FF)return e.button==0;}Browser.Event.mousePos=function(e){ if(Browser.IE)return {x:window.event.x,y:window.event.y}; else if(Browser.FF)return {x:e.clientX,y:e.clientY};}if(TE==null)var TE={};if(TE.UI==null)TE.UI={};TE.UI.drag = { dobj:null, pos:{x:0,y:0}, start:function(obj,e){ if(Browser.Event.leftMouseDown(e)) { var mpos = Browser.Event.mousePos(e); this.pos.x = mpos.x + document.documentElement.scrollLeft - obj.style.left.toInt(); this.pos.y = mpos.y + document.documentElement.scrollTop - obj.style.top.toInt(); this.dobj=obj; $AE(document,"mousemove",TE.UI.drag.moving); $AE(document,"mouseup",TE.UI.drag.end); } }, moving:function(e){ var self = TE.UI.drag; if(self.dobj && Browser.Event.leftMouseDown(e)) { var mpos = Browser.Event.mousePos(e); self.dobj.style.left = (mpos.x+document.documentElement.scrollLeft-self.pos.x)+"px"; self.dobj.style.top = (mpos.y+document.documentElement.scrollTop-self.pos.y)+"px"; } }, end:function(){ var self = TE.UI.drag; if(self.dobj && typeof self.dobj.ondragEnd=="function")self.dobj.ondragEnd(); self.dobj = null; $DE(document,"mousemove",TE.UI.drag.moving); $DE(document,"mouseup",TE.UI.drag.end); }}function $AE(o,_eventKey,_handler){ _eventKey = _eventKey.replace(/^on/i,""); if(Browser.IE) o.attachEvent(["on", _eventKey].join(''),_handler); else if(Browser.FF) o.addEventListener(_eventKey,_handler,false);}function $DE(o,_eventKey,_handler){ _eventKey = _eventKey.replace(/^on/i,""); if(Browser.IE) o.detachEvent(["on", _eventKey].join(''),_handler); else if(Browser.FF) o.removeEventListener(_eventKey,_handler,false);}
[解决办法]
事件添加不正确，这种写法是IE4的事件添加方法
- HTML code
<script type="text/javascript">var skb=document.getElementById("skbdiv");skb.onmousedown = skb_mousedown;skb.onmousemove = skb_mousemove;skb.onmouseup = skb_mouseup;