layerX和layerY以及offsetX和offsetY是来获取相对于触发事件发生的元素上，鼠标的坐标位置的，但是两者却有不同。
下面是测试代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>offsetX</title> <style type = "text/css"> html { margin: 20px; border:3px solid red; padding: 20px; } /*body的边框为橙色*/ body { padding: 20px; margin: 20px; border: 1px solid orange; } /*蓝色边框div*/ #wrapper { padding: 20px; margin: 0; border: 1px solid blue; width: 500px; } /*绿色边框的div*/ #div1 { width: 200px; height: 200px; border: 3px solid red; background: gold; margin-bottom: 20px; } /*嵌套在绿色边框里面的红色边框div*/ #div1_1 { width: 100px; height: 100px; border: 3px solid green; padding: 0; margin: 49px;; background: silver; } /*黑色边框div，用来显示*/ #div2 { width: 200px; height: 200px; border: 1px solid black; } #div3 { margin: 1000px; } </style> <!--myUtil.js是外部js文件--> <script type = "text/javascript" src = "myUtil.js"></script> <script type = "text/javascript"> function test() { myUtil.addEvent("div1", "mousemove", function(event) { event = myUtil.getEventObject(event); var div2 = myUtil.byId("div2"); div2.innerHTML = "X: " + (event.offsetX || event.layerX) + " Y: " + (event.offsetY || event.layerY) + "<br />" + "height: " + myUtil.getComputedStyle("div1", "height") + " " + myUtil.getComputedStyle("div1", "width"); }); } </script> </head> <body onload = "test()"> <div id = "wrapper"> <div id = "div1"><div id = "div1_1"></div></div> <div id = "div2"></div> </div> </body> </html>
整个代码运行后的效果:
最外层的红色边框时html根元素(有20px的margin)
第二层的橙色边框时body元素
第三层蓝色边框是id为wrapper的div框
红色边框，金黄色背景是id为div1的div框
绿色边框，银色背景是id为div1_1的div框
黑色边框为id为div2的显示div框
FF中的layerX和layerY
在火狐中，坐标系的原点位于文档的左上角(也就是地址栏下面的左上角，不是红色边框的左上角),在火狐中所有的坐标值都是以它为参照。能够产生坐标值的区域是鼠标在金黄色背景的div框(id值为div1)上滑动的时候(包括在它红色边框上，以及里面的子元素上，但是不包括它的外边距)。在上面所说的任意地方滑动，所得的坐标值都以上面所说的坐标原点为准。
IE的offsetX和offsetY
在IE8中，坐标原点位置和在火狐中的不一样，并且鼠标在父元素上滑动与在子元素上滑动坐标原点也不一样。在IE8中如果在父div框上滑动(就是金黄色背景的div，id为div1),坐标原点位于父div框左上角上padding与border的交界处。而在子div框(银色背景的div框，id为div1_1)上滑动的时候,坐标原点移动到了子div框左上角padding与border的交界处。能够产生坐标值的地方与在火狐中的一样，但是由于坐标原点的位置与火狐不同，因此可能产生负值(当在上边框和左边框上滑动的时候)或者值为undefined(当鼠标处于上边框或者下边框与padding的交界处时)。
注意:测试用的html文件必须包含dtd文件，否则可能结果不一样(因为dtd文件影响到浏览器对盒模型的解释，详情参阅《FF、IE、Opera中盒模型的差异》)