标签：dom javascript element 鼠标 节点
为了显示鼠标相对于浏览器的位置（相对于屏幕和页面类似），我们可以利用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标签内的所有文本内容都是最新的鼠标坐标。
版权声明：本文为博主原创文章，未经博主允许不得转载。
标签：dom javascript element 鼠标 节点
原文地址：http://blog.csdn.net/jsdchenye/article/details/47753705
