首先，在页面上做出一个div，目标是当鼠标在此div内移动时，可以实时显示其鼠标位置坐标。
第一步：建立div 可使用alert查看div内鼠标经过时是否调用函数
<style type="text/css">
#box {
position: absolute;
width: 200px;
height: 100px;
background-color: brown;
}
</style>
<body>
<div id="box"></div>
</body>
<script type="text/javascript">
var box = document.getElementById("box");
box.onmousemove = function(event) {
alert(event);
}
</script>
事件对象：
- 当事件的响应函数被触发时，浏览器每次都会将一个事件对象作为实参传递进相应函数，上段代码中，event可以是任何字母，如a,b,c...并不必须是event
- 在事件对象中，封装了当前事件的一切信息，如：鼠标的坐标，键盘的哪个按键被按下，鼠标滚轮滚动的方向等等
特别注意：
在IE8以下中，响应函数被触发时不会传递事件对象这样的实参，event会是undefined，此时envent.clientX等都会报错
解决方法：
在IE8以下中，事件对象是作为window对象的属性保存的，所以此时，将event.clientX改为window.event.clientX即可，此写法同样兼容chrome，IE，但不兼容火狐，如果要保证所有兼容——
法一：
if(!event){
event=window.event.clientX;
}
法二：常用写法
event = event || window.event
clientX可以获得鼠标指针的水平坐标
clientY可以获得鼠标指针的垂直坐标
var box = document.getElementById("box");
box.onmousemove = function(event) {
var x = event.clientX;
var y = event.clientY;
alert("x为：" + x + "y为：" + y);
}
此时可以弹出坐标
为观察更直观，在下方再设置一个div:showsite，显示坐标
#box {
width: 200px;
height: 100px;
background-color: brown;
}
#showsite {
width: 200px;
height: 50px;
background-color: darkslateblue;
}
var box = document.getElementById("box");
var showbox = document.getElementById("showsite");
box.onmousemove = function(event) {
var x = event.clientX;
var y = event.clientY;
showsite.innerHTML = "x为：" + x + "y为：" + y;
}
效果为：
b426b3b67422a9348e5d7f1c38eeb05.png
完整代码：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>DOM-login</title>
<style type="text/css">
#box {
width: 200px;
height: 100px;
background-color: brown;
}
#showsite {
width: 200px;
height: 50px;
background-color: darkslateblue;
}
</style>
<script type="text/javascript">
window.onload = function() {
var box = document.getElementById("box");
var showbox = document.getElementById("showsite");
box.onmousemove = function(event) {
event = event || window.event;
var x = event.clientX;
var y = event.clientY;
showsite.innerHTML = "x为：" + x + "y为：" + y;
}
}
</script>
</head>
<body>
<div id="box"></div>
<div id="showsite"></div>
</body>
</html>
网友评论