在js事件拖拽中,为解决IE下拖动的问题,要使用事件捕获
<script>
window.onload=function()
{
var oDiv=document.getElementById('div1');
var disX=0;
var disY=0;
//封装一个函数用于获取鼠标坐标
function getPos(ev)
{
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft;
return {x: ev.clientX+scrollLeft, y: ev.clientY+scrollTop};
}
oDiv.onmousedown=function(ev)
{
var oEvent=ev||event;
var pos=getPos(oEvent); //这样就可以获取鼠标坐标,比如pos.x表示鼠标横坐标
disX=pos.x-oDiv.offsetLeft;
disY=pos.y-oDiv.offsetTop;
if(oDiv.setCapture) //ie下
{
oDiv.onmousemove=function(ev) //ie下使用oDiv
{
var oEvent=ev||event;
var pos=getPos(oEvent);
//防止div跑出可视框
var l=pos.x-disX;
var t=pos.y-disY;
if(l<0)
{
l=0;
}
else if(l>document.documentElement.clientWidth-oDiv.offsetWidth)
{
l=document.documentElement.clientWidth-oDiv.offsetWidth;
}
if(t<0)
{
t=0;
}
else if(t>document.documentElement.clientHeight-oDiv.offsetHeight)
{
t=document.documentElement.clientHeight-oDiv.offsetHeight;
}
oDiv.style.left=l+'px';
oDiv.style.top=t+'px';
}
oDiv.onmouseup=function(ev)
{
oDiv.onmousemove=null; //将move清除
oDiv.onmouseup=null;
oDiv.releaseCapture();
}
oDiv.setCapture();
}
else //ff下 chrome下
{
document.onmousemove=function(ev)
/*由于要防止鼠标滑动太快跑出div,这里应该用document.
因为触发onmousemove时要重新获取鼠标的坐标,不能使用父函数上的pos.x和pos.y,所以必须写var oEvent=ev||event;var pos=getPos(oEvent);*/
{
var oEvent=ev||event;
var pos=getPos(oEvent);
//防止div跑出可视框
var l=pos.x-disX;
var t=pos.y-disY;
if(l<0)
{
l=0;
}
else if(l>document.documentElement.clientWidth-oDiv.offsetWidth)
{
l=document.documentElement.clientWidth-oDiv.offsetWidth;
}
if(t<0)
{
t=0;
}
else if(t>document.documentElement.clientHeight-oDiv.offsetHeight)
{
t=document.documentElement.clientHeight-oDiv.offsetHeight;
}
oDiv.style.left=l+'px';
oDiv.style.top=t+'px';
}
document.onmouseup=function(ev)
{
document.onmousemove=null; //将move清除
document.onmouseup=null;
}
}
return false; //ff chrome的bug,要阻止默认事件
}
}
</script>
合并相同函数
<script>
window.onload=function()
{
var oDiv=document.getElementById('div1');
var disX=0;
var disY=0;
//封装一个函数用于获取鼠标坐标
function getPos(ev)
{
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft;
return {x: ev.clientX+scrollLeft, y: ev.clientY+scrollTop};
}
//封装函数
function moveEV(ev)
{
var oEvent=ev||event;
var pos=getPos(oEvent);
//防止div跑出可视框
var l=pos.x-disX;
var t=pos.y-disY;
if(l<0)
{
l=0;
}
else if(l>document.documentElement.clientWidth-oDiv.offsetWidth)
{
l=document.documentElement.clientWidth-oDiv.offsetWidth;
}
if(t<0)
{
t=0;
}
else if(t>document.documentElement.clientHeight-oDiv.offsetHeight)
{
t=document.documentElement.clientHeight-oDiv.offsetHeight;
}
oDiv.style.left=l+'px';
oDiv.style.top=t+'px';
}
function upEV(ev)
{
this.onmousemove=null; //将move清除
this.onmouseup=null;
if(oDiv.releaseCapture)
{
oDiv.releaseCapture();
}
}
oDiv.onmousedown=function(ev)
{
var oEvent=ev||event;
var pos=getPos(oEvent); //获取鼠标坐标,比如pos.x表示鼠标横坐标
disX=pos.x-oDiv.offsetLeft;
disY=pos.y-oDiv.offsetTop;
if(oDiv.setCapture) //ie下
{
oDiv.onmousemove=moveEV;
oDiv.onmouseup=upEV;
oDiv.setCapture();
}
else //ff下 chrome下
{
document.onmousemove=moveEV;
document.onmouseup=upEV;
}
return false; //火狐的bug,要阻止默认事件
}
}
</script>