<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#areaDiv{
width: 200px;
height: 50px;
border: 1px solid #000;
margin-bottom: 10px;
}
#showMsg{
width: 200px;
height: 20px;
border: 1px solid #000;
}
</style>
<script>
window.onload = function(){
/*
* 当鼠标在 areaDiv 移动时，在 showMsg 中显示鼠标的坐标
*/
var areaDiv = document.getElementById("areaDiv");
var showMsg = document.getElementById("showMsg");
/**
onmousemove
该事件 将会在 鼠标在元素中 移动时被触发
事件对象
当事件响应函数被触发时，浏览器每次都将 一个事件对象 作为实参 传递进 响应函数
*/
areaDiv.onmousemove = function(event){
/**
* 在 ie8 中 响应函数被触发时，浏览器不会传递事件对象
* 在 ie8 及以下的浏览器中，是将事件对象作为 window 对象的属性保存的
*/
// if(!event){
// event = window.event;
// }
event = event || window.event;
/**
* clientX 可以获取鼠标指针的水平坐标
* clientY 可以获取鼠标指针的垂直坐标
*/
var x = event.clientX;
var y = event.clientY;
// alert("x="+x +",y="+y)
// 在 showMsg 显示鼠标的 坐标
// console.log(event);
showMsg.innerHTML = "x="+x +",y="+y;
}
}
</script>
</head>
<body>
<div id="areaDiv"></div>
<div id="showMsg"></div>
</body>
</html>
