JavaScript Event学习第七章：事件属性

核心提示： 下面是这6组坐标：1、clientX,clientY2、layerX,layerY3、offsetX,offsetY4、pageX,pageY5、screenX,screenY6、x,y我曾经在这里解释过pageX/Y和clientX/Y的问题，screenX和screenY是唯一一对跨浏览器兼

下面是这6组坐标：

1、clientX,clientY

2、layerX,layerY

3、offsetX,offsetY

4、pageX,pageY

5、screenX,screenY

6、x,y

我曾经在这里解释过pageX/Y和clientX/Y的问题。

screenX和screenY是唯一一对跨浏览器兼容的属性。他们给出鼠标在整个电脑屏幕上的坐标。不幸的是，仅仅这个信息是远远不够的：你永远也不需要知道鼠标在屏幕的位置--好吧，或者你想在当前的鼠标位置放置一个新的窗口。

其他的三对属性也不重要，看这里的描述。

正确的代码

下面的代码能够正确的检测鼠标的坐标

1　function　doSomething(e)　{<br>　　　　var　posx　=　0;<br>　　　　var　posy　=　0;<br>　　　　if　(!e)　var　e　=　window.event;<br>　　　　if　(e.pageX　||　e.pageY)　　　　　{<br>　　　　　　　　posx　=　e.pageX;<br>　　　　　　　　posy　=　e.pageY;<br>　　　　}<br>　　　　else　if　(e.clientX　||　e.clientY)　　　　　{<br>　　　　　　　　posx　=　e.clientX　+　document.body.scrollLeft<br>　　　　　　　　　　　　+　document.documentElement.scrollLeft;<br>　　　　　　　　posy　=　e.clientY　+　document.body.scrollTop<br>　　　　　　　　　　　　+　document.documentElement.scrollTop;<br>　　　　}<br>　　　　//　posx　and　posy　contain　the　mouse　position　relative　to　the　document<br>　　　　//　Do　something　with　this　information<br>}<br>

原文在这里：http://www.quirksmode.org/js/events_properties.html

文章出处：http://beiyu.cnblogs.com

编缉推荐阅读以下文章

• JavaScript Event学习补遗：addEventSimple
• JavaScript Event学习第十一章：按键的检测
• JavaScript Event学习第十章：一些可替换的事件对
• JavaScript Event学习第九章：鼠标事件
• JavaScript Event学习第八章：事件的顺序
• JavaScript Event学习第六章：事件的访问
• JavaScript Event学习第五章：高级事件注册模型
• JavaScript Event学习第四章：传统的事件注册模型
• JavaScript Event学习第三章：早期的事件处理程序
• JavaScript Event学习第二章：Event