请教firefox中层div的拖动问题 楼上正解。IE下,可以用event.X或者event.clientX,效果一样。FF下,只有event.clientX和event.pageX,前者和IE的一样,后者是鼠标在整个页面中的位置,即加了滚动条位置。 解决方案 » 免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货 改为 clientX/Y 在firefox下还是不行,下面是完整代码:<html><body leftmargin=0 topmargin=0><div id="skb1" style="position:absolute;background-color:Red;width:100px;height:30px"></div><script type="text/javascript">var skb = document.getElementById("skb1");skb.onmousedown = skb_mousedown;skb.onmousemove = skb_mousemove;skb.onmouseup = skb_mouseup;var skbX,skbY;var skbmove=null;function skb_mousedown(){ skbmove = skb; skbmove.setCapture(); var evt = window.event; skbX = evt.clientX - skb.style.pixelLeft; skbY = evt.clientY - skb.style.pixelTop; }function skb_mousemove(evt){ if(skbmove == null) return true; var evt = window.event; var x = evt.clientX - skbX; var y = evt.clientY - 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> 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);}调用方法触发的元素.onmousedown = function(e){TE.UI.drag.start(拖动的元素,e);} 事件添加不正确,这种写法是IE4的事件添加方法<script type="text/javascript">var skb=document.getElementById("skbdiv");skb.onmousedown = skb_mousedown;skb.onmousemove = skb_mousemove;skb.onmouseup = skb_mouseup;应该修改为: //根据不同的浏览器支持情况添加事件 if(document.addEventListener){//2级DOM skb.addEventListener("mousedown",skb_mousedown,true); skb.addEventListener("mousemove",skb_mousemove,true); skb.addEventListener("mouseup",skb_mouseup,true); }else if(document.attachEvent){//IE5+ skb.attachEvent("onmousedown",skb_mousedown); skb.attachEvent("onmousemove",skb_mousemove); skb.attachEvent("onmouseup",skb_mouseup); }else{//IE4 skb.onmousedown = skb_mousedown; skb.onmousemove = skb_mousemove; skb.onmouseup = skb_mouseup; } 我最近刚解决了这个问题,兼容IE和FF,以下是代码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><html><head><title>鼠标拖动层</title><script language=javascript>var obj="",pX="",pY="";function mdown(id,temp){ obj=document.getElementById(id); ev=temp; pX=ev.clientX-obj.offsetLeft; pY=ev.clientY-obj.offsetTop;}function mmove(temp){ ev=temp; if(obj){ obj.style.cursor="move"; obj.style.left=ev.clientX-pX+"px"; obj.style.top=ev.clientY-pY+"px"; }}function mup(){ if(obj){ obj.style.cursor="default"; obj="",pX="",pY=""; }}</script><style></style></head><body onmousemove="mmove(event)" onmouseup="mup()"><div id="MoveDiv" style="position:absolute;left:200px;top:50px;width:100px;height:300px;background:#00c"> <div style="line-height:25px;text-align:center;background:#f00" onmousedown=mdown("MoveDiv",event)> 按这里移动 </div></div></body> firefox 的事件 必须这样写onmousedown=mdown("MoveDiv",event) 火狐下jquery如何获取页面点击的对象JS也行 CKEditor 3.x + CKFinder 的童鞋请进 有这样处理问题的嘛? 求助图片加上JS特效以后白色变透明了 改变导航的背景色,高手来看下啊,很急的 仿apple.com 手风琴效果 一个页面有两个表单,用javascrip验证,一个可以,一个不能的问题求助 关于Microsoft script debugger jsp怎么实现选择部门了再去选择部门下的人员呢 javascript中for循环次数问题?小白自学中,还望大神们解答一下,万分感谢! 如何获取触发事件的元素 请帮忙设计一个倒计时函数,谢谢
<body leftmargin=0 topmargin=0>
<div id="skb1" style="position:absolute;background-color:Red;width:100px;height:30px"></div>
<script type="text/javascript">
var skb = document.getElementById("skb1");
skb.onmousedown = skb_mousedown;
skb.onmousemove = skb_mousemove;
skb.onmouseup = skb_mouseup;var skbX,skbY;
var skbmove=null;
function skb_mousedown(){
skbmove = skb;
skbmove.setCapture();
var evt = window.event;
skbX = evt.clientX - skb.style.pixelLeft;
skbY = evt.clientY - skb.style.pixelTop; }function skb_mousemove(evt){
if(skbmove == null) return true;
var evt = window.event;
var x = evt.clientX - skbX;
var y = evt.clientY - 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>
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);
}调用方法触发的元素.onmousedown = function(e){TE.UI.drag.start(拖动的元素,e);}
<script type="text/javascript">
var skb=document.getElementById("skbdiv");
skb.onmousedown = skb_mousedown;
skb.onmousemove = skb_mousemove;
skb.onmouseup = skb_mouseup;应该修改为: //根据不同的浏览器支持情况添加事件
if(document.addEventListener){//2级DOM
skb.addEventListener("mousedown",skb_mousedown,true);
skb.addEventListener("mousemove",skb_mousemove,true);
skb.addEventListener("mouseup",skb_mouseup,true);
}else if(document.attachEvent){//IE5+
skb.attachEvent("onmousedown",skb_mousedown);
skb.attachEvent("onmousemove",skb_mousemove);
skb.attachEvent("onmouseup",skb_mouseup);
}else{//IE4
skb.onmousedown = skb_mousedown;
skb.onmousemove = skb_mousemove;
skb.onmouseup = skb_mouseup;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
<title>鼠标拖动层</title>
<script language=javascript>
var obj="",pX="",pY="";
function mdown(id,temp){
obj=document.getElementById(id);
ev=temp;
pX=ev.clientX-obj.offsetLeft;
pY=ev.clientY-obj.offsetTop;
}
function mmove(temp){
ev=temp;
if(obj){
obj.style.cursor="move";
obj.style.left=ev.clientX-pX+"px";
obj.style.top=ev.clientY-pY+"px";
}
}function mup(){
if(obj){
obj.style.cursor="default";
obj="",pX="",pY="";
}
}
</script>
<style>
</style>
</head>
<body onmousemove="mmove(event)" onmouseup="mup()">
<div id="MoveDiv" style="position:absolute;left:200px;top:50px;width:100px;height:300px;background:#00c">
<div style="line-height:25px;text-align:center;background:#f00" onmousedown=mdown("MoveDiv",event)>
按这里移动
</div>
</div>
</body>
onmousedown=mdown("MoveDiv",event)