为了显示鼠标相对于浏览器的位置（相对于屏幕和页面类似），我们能够利用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. 在 Android* 商务应用中实施地图和地理围栏特性

    摘要 本案例研究讨论了怎样将地图和地理定位特性构建到 Android* 商务应用中.包含在 Google Maps* 上覆盖商店位置,以及在设备进入商店地理围栏邻近区域时借助地理围栏通知用户. 文件夹 ...

  2. nagios 安装配置（包含nrpe端）全 （一）

    一.nagios安装: 1.安装下面命令: 这是本人监控服务时自己定义插件所用到的几个系统命令.可不安装. (1)iostat:监控磁盘IO信息: apt-getinstall sysstat (2) ...

  3. 5.decltype类型拷贝

    #include <iostream> using namespace std; template <class T> void show(T *p) { //初始化 decl ...

  4. 82.管道实现cgi内存多线程查询

    总体思路就是客户端写入要查询的数据到管道中,服务器端从管道读取,然后写入随机文件,再把文件名写入管道,然后客户端再读取文件 服务器端 设置缓冲区大写,设置管道名字,以及标识有多少个线程等 //设置缓存 ...

  5. socket TCP简单通讯

    socket 服务器 // // main.m // socket_server // // Created by lujunjie on 2016/11/23. // Copyright © 201 ...

  6. ORACLE 11G R2 DG_BROKER 之SWITCH OVER

      官网:http://docs.oracle.com/cd/B12037_01/server.101/b10822/cli.htm 这个是有必要看一下. 注意本人已经完毕一次SWITCHOVER 所 ...

  7. JS学习笔记 - 微博发布效果

    <script> window.onload = function() { var oTxt = document.getElementById('txt1'); var oBtn = d ...

  8. [React Intl] Render Content with Placeholders using react-intl FormattedMessage

    Learn how to use react-intl to set dynamic values into your language messages. We’ll also learn how ...

  9. Docker基础（一）

    1.安装:安装教程很多,Ubuntu14.04安装比较简单docker[之前使用Ubuntu13.04结果安装了好久也没有安装好,后来就直接是14,04了] 2.docker是容器,那么什么是容器? ...

  10. UVA 11090 - Going in Cycle!! SPFA

    http://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem&p ...