<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box{width: 200px;height: 200px;background-color: red;position: absolute;}
</style>
<script>
window.onload = function(){
var Div = document.getElementById("box");
Div.onmousedown = function(ev){
var e = ev || window.event;
offsetX = e.clientX - Div.offsetLeft;
offsetY = e.clientY - Div.offsetTop;
}
document.onmousemove = function(ev){
var e = ev || window.event;
Div.style.left = e.clientX - offsetX + "px";
Div.style.top = e.clientY - offsetY + "px";
}
Div.onmouseup = function(e){
document.onmousemove = null;
}
}
</script>
</head>
<body>
<div id="box"></div>
</body>
</html>我知道把
document.onmousemove = function(ev){
var e = ev || window.event;
Div.style.left = e.clientX - offsetX + "px";
Div.style.top = e.clientY - offsetY + "px";
}
这段代码放到Div.onmousedown = function(ev)里面就对了，
但是为什么我这样写是错的？
你给box元素添加了鼠标‘按下’和‘松开’两个事件，给document添加了鼠标移动事件。
document的鼠标滑动事件是用来操纵box元素位置。
box元素的按钮‘松开’事件是用来清除document的鼠标滑事件。
当你这样写的时候，当鼠标按钮‘松开’事件触发，就清除了document的鼠标滑事件，box元素就无法移动。
但是当你把document.onmousemove = function(ev)放在 Div.onmousedown = function(ev)函数里面就可以重复移动，是因为当你触发鼠标‘按下’事件后，会给document.onmousemove重新赋方法，然后在鼠标滑动时box元素会动，当鼠标松开后，清除document.onmousemove。当你再次触发鼠标‘按下’事件后，又会给document.onmousemove重新赋方法，所以可以重复移动。
document.onmousemove = null; 因为这句话
因为你在onmouseup的时候把绑定事件移除了，所以必须重新绑定事件！