为了显示鼠标相对于浏览器的位置（相对于屏幕和页面类似），我们能够利用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. startActivity时报错Calling startActivity() from outside of an Activity context requires the FLAG_ACTIVITY_NEW_TASK flag

    startActivity时报错Calling startActivity() from outside of an Activity context requires the FLAG_ACTIVI ...

  2. 89.hash算法实现CSDN密码处理

    初始化,数据的行数,hash链表结构体,存储头结点 #define _CRT_SECURE_NO_WARNINGS #include <stdio.h> #include <stdl ...

  3. rhel5安装 oracle11

    readhat 安装11gr2文档 需要注意的地方:必须关掉的 1,防火墙:2,SElinux . root 用户运行  setup  命令可关防火墙与SElinux 修改网络配置文件,一定要重启此文 ...

  4. 【例题 6-20 UVA - 1599】Ideal Path

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 逆向做一遍bfs. 得到终点到某个点的最短距离. 这样,我们从起点顺序的时候. 就能知道最短路的下一步是要走哪里了. 这样,我们从起 ...

  5. 洛谷 P1178 到天宫做客

    P1178 到天宫做客 题目描述 有一天,我做了个梦,梦见我很荣幸的接到了猪八戒的邀请,到天宫陪他吃酒.我犹豫了.天上一日,人间一年啊!当然,我是个闲人,一年之中也没有多少时日是必须在人间的,因此,我 ...

  6. Android开发之搜芽项目的图片载入问题(使用Volley进行网络图片载入)

    搜芽的移动开发这几天进度相对来说很的快. 可是美中不足的就是网络图片的载入问题. 我有两套方案: 1)沿用迅雷动漫的图片载入.迅雷动漫也是用的一个开源的库.可是不知道是我使用出了问题还是真的是它的问题 ...

  7. 2013腾讯编程马拉松||HDU 4505 小Q系列故事——电梯里的爱情 水水水

    http://acm.hdu.edu.cn/showproblem.php?pid=4505 题目大意: 电梯最开始在0层,并且最后必须再回到0层才算一趟任务结束.假设在开始的时候已知电梯内的每个人要 ...

  8. Linux_Shell初级编程入门

    从程序员的角度来看, Shell本身是一种用C语言编写的程序,从用户的角度来看,Shell是用户与Linux操作系统沟通的桥梁.用户既可以输入命令执行,又可以利用 Shell脚本编程,完成更加复杂的操 ...

  9. [Angular] Change component default template (ng-content, ng-template, ngTemplateOutlet, TemplateRef)

    Here is the defulat tab header template: <ng-template #defaultTabHeader let-tabs="tabsX" ...

  10. java.util.logging使用笔记2

      java.util.logging是java自带的日志处理系统,其功能不如log4j/logback强大,但可以完成基本的日志需求. 另外,如果在一个项目中使用log4j, 而这个项目引用的第3方 ...