下面代码可以实现当鼠标移动时，绿色div始终跟着鼠标移动
<!DOCTYPE html>
<html>
<head>
<title>学习事件</title>
<style type="text/css">
body{
border: 1px solid black;
}
div{
height: 10px;
width: 10px;
background-color: green;
position: absolute;
}
</style>
<script type="text/javascript">
window.onload = function(){
document.onmousemove = function(){
var oDiv = document.getElementById('div1');
oDiv.style.left = event.clientX+'px';
oDiv.style.top = event.clientY+'px';
}
};
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>其实上面例子有一个隐患，当页面高度超过一个版面，比如height=2000px时，滑动页面跟踪就会出错，那么加入scrollTop解决这个问题
<!DOCTYPE html>
<html>
<head>
<title>学习事件</title>
<style type="text/css">
body{
border: 1px solid black;
height: 2000px;
}
div{
height: 10px;
width: 10px;
background-color: green;
position: absolute;
}
</style>
<script type="text/javascript">
window.onload = function(){
document.onmousemove = function(){
var oDiv = document.getElementById('div1');
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
oDiv.style.left = event.clientX+'px';
oDiv.style.top = event.clientY+scrollTop+'px';
}
};
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>