首页 > 代码库 > Javascript中的DOM实现显示鼠标的空间位置
Javascript中的DOM实现显示鼠标的空间位置
为了显示鼠标相对于浏览器的位置（相对于屏幕和页面类似），我们能够利用click事件，获得关于鼠标单击的事件对象event。这个事件对象里的clientX和clientY包括了鼠标的位置信息，所以我突发奇想。那我可不能够通过DOM中的createElement创建一个标签元素用于在相应的鼠标位置显示当前的鼠标相对于浏览器的坐标呢？
这里我先利用Element中的createElement()方法，创建一个div的标签。为了让标签信息能显示在鼠标相应的位置处，利用div.style将相应的top。left属性值赋值为clientX和clientY，这样这个新建的div标签层就能够显示在鼠标的相应位置。
接着在该标签内利用createTextNode()创建一个文本节点。
文本节点内包函鼠标相对于浏览器的空间横坐标和空间纵坐标。
然后将这个文本节点通过appendChild方法增加到div标签内，将div标签appendChild到body中。这样整个用来在鼠标位置显示鼠标坐标位置的信息块就做好了。最后利用DOM0中的事件处理程序div.onclick=function(event){};来监測鼠标单击事件，从而在事件内相应显示相对于浏览器的坐标值。详细程序代码：
<!doctype>
<html>
<head></head>
<body>
<script type="text/javascript">
var myDoc=document;
var div=document.createElement("div");
div.style.position="absolute";
//div.style.border="1px solid black";
myDoc.onclick=function(event){
if(div.childNodes.length){
div.removeChild(div.firstChild);
}
event=event || window.event;
div.style.left=event.clientX;
div.style.top=event.clientY;
div.appendChild(document.createTextNode("("+event.clientX+"px"+";"+event.clientY+"px"+")"));
}
document.body.appendChild(div);
</script>
</body>
</html>
这里最后一部注意，每一单击鼠标后都会在div中增加一个text的节点，这样当你多次单击后。显示的内容就包括前面的坐标值。所以这里每次单击玩之后。假设再单击鼠标，就会利用div.childNodes.length来推断。从而删除刚開始的文本节点。从而保证div标签内的全部文本内容都是最新的鼠标坐标。
Javascript中的DOM实现显示鼠标的空间位置