javascript实时获取鼠标坐标值并显示的方法
本文实例讲述了javascript实时获取鼠标坐标值并显示的方法。分享给大家供大家参考。具体实现方法如下：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<title>JS实时获取鼠标坐标值并显示</title>
</head>
<body>
<scripttype="text/javascript">
vargetCoordInDocumentExample=function(){
varcoords=document.getElementById("coords");
coords.onmousemove=function(e){
varpointer=getCoordInDocument(e);
varcoord=document.getElementById("coord");
coord.innerHTML="X,Y=("+pointer.x+","+pointer.y+")";
}
}
vargetCoordInDocument=function(e){
e=e||window.event;
varx=e.pageX||(e.clientX+
(document.documentElement.scrollLeft
||document.body.scrollLeft));
vary=e.pageY||(e.clientY+
(document.documentElement.scrollTop
||document.body.scrollTop));
return{'x':x,'y':y};
}
window.onload=function(){
getCoordInDocumentExample();
};
</script>
<divid="coords"
style="width:500px;height:200px;background:#F2F1D7;
border:2pxsolid#0066cc;">
请在此移动鼠标。
</div>
<br/>
<divid="coord"
style="width:500px;border:2pxsolid#336699;"> </div>
</body>
</html>
希望本文所述对大家的javascript程序设计有所帮助。