为了显示鼠标相对于浏览器的位置（相对于屏幕和页面类似），我们能够利用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实现显示鼠标的空间位置的更多相关文章

  1. 借助JavaScript中的Dom属性改变Html中Table边框的颜色

    借助JavaScript中的Dom属性改变Html中Table边框的颜色 -------------------- <html> <head> <title>我是页 ...

  2. javascript中获取dom元素的高度和宽度

    javascript中获取dom元素高度和宽度的方法如下: 网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网 ...

  3. javascript中获取dom元素高度和宽度

    javascript中获取dom元素高度和宽度的方法如下: 网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网 ...

  4. js | javascript中获取dom元素的高度和宽度

    javascript中获取dom元素高度和宽度的方法如下: 网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网 ...

  5. JavaScript中的DOM及相关操作

    一.什么是DOM JavaScript由ECMAScript.DOM和BOM三部分组成,其中DOM代表描述网页内容的方法和接口,即文档对象模型(Document Object Model).在网页上, ...

  6. 一些JavaScript中的DOM的优化小技巧

    在进行DOM优化时需要关注的问题有:修改DOM的时候,会引起页面的重排,重绘.因为JS是单线程执行的,那么在重排重绘的过程中可能会阻塞用户的操作.为了更好的用户体验,必须要严格控制这些操作. 一.对象 ...

  7. javaScript中的DOM补充

    一.DOM树 二.DOM节点 DOM 是这样规定的:    整个文档是一个文档节点     每个 HTML 标签是一个元素节点     包含在 HTML 元素中的文本是文本节点     每一个 HTM ...

  8. javascript中的DOM介绍（一）

    一.基础知识点 1.DOM是文档对象模型,是针对HTML和XML文档的一个API(应用程序接口) 2.DOM描绘了一个层次化的节点数,允许开发人员进行添加,移除个修改等操作 3.IE浏览器中所有的DO ...

  9. 初步总结javascript中学习DOM之前的知识

    嘿嘿,又到了周末时间,周六其实就是总结这周的学习的,记得周二周三刚开始接触javascript时间,还是不知道怎么学习的,就感觉找不到方向,那时间学习的只是总结了一些简单的定义或者是学习结构,今天就把 ...

随机推荐

  1. JavaScript推断undefined的技巧

    两种方法: 处理变量为undefined的情况: v = v||null;    //假设v为undefined,则其值变为null 双感叹号:!!,把null/undifined/0转换为bolle ...

  2. windows下使用cpanm进行模块安装

    windows下使用cpanm进行模块安装 要放假了,突然想整理一下手头上的软件,突然发现perl的安装模块这个功能不能用. 弄了一下,使得windows 下 perl 的 cpanm能用,避免成天为 ...

  3. RocketMQ(八)：消息发送

    匠心零度 转载请注明原创出处,谢谢! RocketMQ网络部署图 NameServer:在系统中是做命名服务,更新和发现 broker服务. Broker-Master:broker 消息主机服务器. ...

  4. mysql 语句优化心得

    排序导致性能较慢 优化策略:1.尽量不使用排序 2.只查有索引的结果然后 内连接查询 select  bizchance0_.*  from biz_chance bizchance0_, biz_b ...

  5. 洛谷 P2969 [USACO09DEC]音符Music Notes

    P2969 [USACO09DEC]音符Music Notes 题目描述 FJ is going to teach his cows how to play a song. The song cons ...

  6. [Angular] HttpParams

    It is possible to use HttpParams to set http params. For example we have this url to make: https://a ...

  7. iOS_06_基本运算符

    一.算术运算 c语言一共有34种运算符,包括了常见的加减乘除 1.加法运算+ # 除了能做加法运算,还能表示正号:+5.+90 2.减法运算- # 除了能做减法运算,还能表示符号:-10.-200 3 ...

  8. DE1-SOC学习

    https://people.ece.cornell.edu/land/courses/ece5760/DE1_SOC/HPS_peripherials/index.html https://peop ...

  9. IOS获取手机设备所有应用

    //返回一个数组 1 NSMutableArray *applist = [[NSMutableArray alloc]init]; NSString *pathOfApplications = @& ...

  10. SpringMVC学习记录(五)--表单标签

    在使用SpringMVC的时候我们能够使用Spring封装的一系列表单标签,这些标签都能够訪问到ModelMap中的内容. 以下将对这些标签一一介绍. 1.引入标签头文件 在正式介绍SpringMVC ...