为了显示鼠标相对于浏览器的位置（相对于屏幕和页面类似），我们能够利用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. html5 audio标签相关知识点总结

    1.audio指JS原生对象,假如用jquery获取到audio标签后,需要dom[0]转为原生JS对象 if(audio.paused){ //如果音频暂停,就播放 audio.play(); }e ...

  2. POJ2029:Get Many Persimmon Trees(二维树状数组)

    Description Seiji Hayashi had been a professor of the Nisshinkan Samurai School in the domain of Aiz ...

  3. POJ 1852 Ants || UVA 10881 - Piotr's Ants 经典的蚂蚁问题

    两题很有趣挺经典的蚂蚁问题. 1.n只蚂蚁以1cm/s的速度在长为L的竿上爬行,当蚂蚁爬到竿子的端点就会掉落.当两只蚂蚁相撞时,只能各自反向爬回去.对于每只蚂蚁,给出距离左端的距离xi,但不知道它的朝 ...

  4. HibernateCRUD基础框架(2)-HQL语句构造器(HqlQueryBuilder,HqlUpdateBuilder)

    上篇讲述了最基本的实体类,本篇接着讲述HQL语句构造器,包括查询和更新等. 优点:通过面向对象的方式构造HQL语句,更快捷,不需要手动拼接HQL. 缺点:封装可能降低性能,只能支持常用的和较为简单的H ...

  5. 【Codeforces Round #299 (Div. 2) C】 Tavas and Karafs

    [链接] 我是链接,点我呀:) [题意] 给你一个规则,让你知道第i根萝卜的高度为si = A+(i-1)*B 现在给你n个询问; 每次询问给你一个固定的起点l; 让你找一个最大的右端点r; 使得l. ...

  6. uvalive 6393(uva 1572) Self-Assembly 拓扑排序

    题意: 给出一些正方形,这些正方形的每一条边都有一个标号.这些标号有两种形式:1.一个大写字母+一个加减号(如:A+, B-, A-......), 2.两个0(如:00):这些正方形能够任意翻转和旋 ...

  7. poj 3071 Football(线段树+概率）

    Football Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 2801   Accepted: 1428 Descript ...

  8. 嵌入式Linux学习笔记 NAND Flash控制器

    一.NAND Flash介绍和NAND Flash控制器的使用 NAND Flash在嵌入式系统中的作用,相当于PC上的硬盘 常见的Flash有NOR Flash和NAND Flash,NOR Fla ...

  9. UVA 10635 - Prince and Princess LCS转化为LIS

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

  10. (转载)iis7下站点日志默认位置

    转自http://www.cnblogs.com/mincyw/p/3425468.html iis7下站点日志默认位置   在iis6时,通过iis管理器的日志配置可以找到站点日志存储的位置. 但是 ...