DOM事件对象
js-dom-鼠标拂过显示坐标事件
onmousemove:鼠标移动事件.
clientX:当事件被触发时,可以获取当前可见区域鼠标指针的水平坐标.
cilentY:当事件被触发时,可以获取当前可见区域鼠椟指针的垂直坐标.
pageX:获取鼠标相对于当前页面的水平坐标.(IE8及以下不支持)
pageY:获取鼠标相对于当前页面的垂直坐标.
功能快捷键
撤销:Ctrl + Z
图片示例
图片:
代码示例
代码片
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>鼠标拂过显示坐标事件</title>
<style type="text/css">
#areaDiv{
width: 600px;
height: 80px;
border: 2px solid black;
}
#showMsg{
width: 580px;
height: 40px;
margin-top: 10px;
padding: 10px;
border: 2px solid black;
}
</style>
<script type="text/javascript">
/*当鼠标在areaDiv中移动时,在showMsg中来显示鼠标的坐标*/
window.onload = function(){
//获取两个div
var areaDiv = document.getElementById("areaDiv");
var showMsg = document.getElementById("showMsg");
//areaDiv鼠标移动事件
areaDiv.onmousemove = function(event){
/*解决事件兼容性问题*/
//第一种写法:
/*if(!event){
event = window.event;
}*/
//第二种写法:
//||:短路运算符,如果event = event为true ,则不执行window.event
//如果event = event为false ,则执行window.event
event = event || window.event;
//IE8及以下都识别不出来event,所以在前面加window
var x = event.clientX;
var y = event.clientY;
showMsg.innerHTML = "x = " + x + " , y = " + y ;
};
};
</script>
</head>
<body>
<div id="areaDiv"></div>
<div id="showMsg"></div>
</body>
</html>