目标：鼠标在固定区域移动时，获取到鼠标当前的xy坐标。
兼容性：clientX，clientY IE8及以下不兼容，需要进行判断
不兼容原因：在IE8及以下浏览器中，事件对象时作为window对象的属性进行保存的；但是一般浏览器是每次将事件对象作为实参传递相应函数的，在事件对象中，直封装了当前事件相关的一切信息，如鼠标的位置，当前按钮下的键盘键等。
效果如图：
20190214081824.png
<!DOCTYPE html>
<html lang="en">
<head>
<title>事件对象</title>
<style>
#zonnediv {
width: 300px;
height: 300px;
border: 1px solid red;
margin-bottom: 20px;
}
#zonnedinput {
width: 300px;
height: 50px;
border: 1px solid red;
}
</style>
</head>
<body>
<div id="zonnediv"></div>
<div id="zonnedinput"></div>
</body>
<script>
// 获取元素ID
var zonnediv = document.getElementById("zonnediv")
var zonnedinput = document.getElementById("zonnedinput")
zonnediv.onmousemove = function (event) {
// 处理浏览器兼容性
// 因为在IE8中及以下中，相应函数被触发时不会直接传递事件对象，而是会将事件对象作为window对象的属相保存。
event = event || window.event
// 获取坐标并赋值给x，y
var x = event.clientX;
var y = event.clientY;
//将结果显示在指定区域
zonnedinput.innerHTML = "x=" + x + "," + "y=" + y
}
</script>
</html>
网友评论