<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#wrap{
width: 400px;
height:400px;
border: 2px solid red;
margin-left: 500px;
}
#box {
width: 200px;
height: 200PX;
margin-left: 100px;
margin-top: 100px;
word-break: break-all;
border: 2px solid #0000FF;
}
#panel {
width: 100px;
height: 20px;
border: 2px solid #0000FF;
margin-left: 150px;
margin-top: 50px;
}
</style>
</head>
<body>
<div id="wrap">
<div id="box"></div>
</div>
<div id="panel"></div>
<script type="text/javascript">
var box = document.getElementById("box"),
panel = document.getElementById("panel");
box.onmousemove = function(event) {
//onmousemove
var top=box.scrollTop;
var eve = event || window.event;
//关于firefox下获取事件对象需要在函数中设置参数即可。
// ie的事件对象为window.event,主流浏览器的事件对象为event
var x = eve.pageX||eve.clientX;
//鼠标位置信息,pageX支持主流浏览器的鼠标的位置信息
//ie支持的为clientX
var y = eve.pageY|| eve.clientY;
panel.innerHTML = "X:" + x + " " + "Y:" + y;
//有onmousemove,就可以监听某个元素上的鼠标移动事件
}
//获取当前元素到左边窗口的偏移量
</script>
</body>
</html>
