下面先看一个有bug的版本,就是鼠标移动太快后方块会跟不上鼠标的移动,然后鼠标就离开了方块区域,而事件都是绑定在方块(div)上的,所以当鼠标离开方块后方块就停了下来,当鼠标(无论是否松开鼠标左键)回到方块区域方块又会跟着鼠标移动。
出现这种问题的原因是:系统监听鼠标移动的频次小于鼠标移动的频次。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鼠标拖动</title>
</head>
<body>
<div style="width:100px;height:100px;background-color:red;position:absolute;left:0;top:0;"></div>
<script type="text/javascript">
var div=document.getElementsByTagName('div')[0];
var disX,//鼠标与方块左上角顶点的差值
disY;
div.onmousedown=function(e){
disX=e.pageX-parseInt(div.style.left);
disY=e.pageY-parseInt(div.style.top);
div.onmousemove=function(e){
var event=e||window.event;//兼容
div.style.left=e.pageX-disX+"px";//减去差值
div.style.top=e.pageY-disY+"px";
}
div.onmouseup=function(){
div.onmousemove=null;
}
}
</script>
</body>
</html>
解决的方案就是不把onmousemove绑定在方块上,而是绑定在document上,鼠标怎么移动也不可能移出document,而onmousedown依旧绑定在div上。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鼠标拖动</title>
</head>
<body>
<div style="width:100px;height:100px;background-color:red;position:absolute;left:0;top:0;"></div>
<script type="text/javascript">
var div=document.getElementsByTagName('div')[0];
var disX,//鼠标与方块左上角顶点的差值
disY;
div.onmousedown=function(e){
disX=e.pageX-parseInt(div.style.left);
disY=e.pageY-parseInt(div.style.top);
document.onmousemove=function(e){//div->document
var event=e||window.event;//兼容
div.style.left=e.pageX-disX+"px";//减去差值
div.style.top=e.pageY-disY+"px";
}
document.onmouseup=function(){//div->document
document.onmousemove=null; //div->document
}
}
</script>
</body>
</html>