DOM event object
js-dom-mouse over display coordinate event
onmousemove: mouse move event.
clientX: when the event is triggered, you can get the currentvisible areaThe horizontal coordinates of the mouse pointer .
cilentY: When the event is triggered, the currentvisible areaThe vertical coordinates of the mouse pointer .
pageX: Get the mouse relative toThe horizontal coordinate of the current page.(IE8 and below are not supported)
pageY: get the mouse relative toThe vertical coordinate of the current page.
Function shortcut key
Undo: Ctrl+Z
picture example
picture:
code example
代码片
<!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>