<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css">
#box{
width: 100px;
height: 100px;
background: red;
position: absolute;
}
</style>
<script>
// onClick 鼠标点击事件，多用在某个对象控制的范围内的鼠标点击-[点击]
// onDblClick 鼠标双击事件-[双击]
// onMouseDown 鼠标上的按钮被按下了-[按下]
// onMouseMove 鼠标移动时触发的事件-[移动]
// onMouseUp 鼠标按下后，松开时激发的事件-[松开]
// onMouseOver 当鼠标移动到某对象范围的上方时触发的事件-[移入]
// onMouseOut 当鼠标离开某对象范围时触发的事件-[移出]
// onKeyPress 当键盘上的某个键被按下并且释放时触发的事件.[注意:页面内必须有被聚焦的对象]
// onKeyDown 当键盘上某个按键被按下时触发的事件[注意:页面内必须有被聚焦的对象]
// onKeyUp 当键盘上某个按键被按放开时触发的事件[注意:页面内必须有被聚焦的对象]
// 鼠标拖拽先down ，后move，最后up，而不是先down ，后over，最后out。
window.onload = function(){
var oBox = document.getElementById(‘box‘);
oBox.onmousedown = function(ev){
var ev = ev || event,
disX = ev.clientX - this.offsetLeft,
disY = ev.clientY - this.offsetTop;
document.onmousemove = function(ev){
var ev = ev || event;
oBox.style.left = ev.clientX - disX + ‘px‘;
oBox.style.top = ev.clientY - disY + ‘px‘;
}
document.onmouseup = function(){
document.onmousemove = document.onmouseup = null;
}
//return false
}
}
</script>
</head>
<body>
<div id="box"></div>
</body>
</html>
