Event对象的5种坐标

来源：广州中睿信息技术有限公司官网

发布时间：2012/10/21 23:25:16 编辑：editor 阅读 221 次

使用鼠标事件经常碰到这样的需求，比如获取鼠标相对于事件源的位置，鼠标相对于事件源对象父元素的位置。。。但是你懂的，浏览器实在太不和谐了，兼容性且不说，各种坐标属性看得人头昏眼花，极容易混淆。好吧，我

使用鼠标事件经常碰到这样的需求，比如获取鼠标相对于事件源的位置，鼠标相对于事件源对象父元素的位置。。。但是你懂的，浏览器实在太不和谐了，兼容性且不说，各种坐标属性看得人头昏眼花，极容易混淆。好吧，我来总结一下：

测试浏览器：IE8, Chrome13, FF8, Safari5, Opera11

先上测试用例（用HTML5的doctype测试，也可看出未来的发展趋势，其他doctype可自行测试）：

&lt;!DOCTYPE html&gt;  &lt;html&gt;  &lt;head&gt;   &lt;meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/&gt;      &lt;style type="text/css"&gt;    html {     background:red;    }    body {     background:green;    }    #null {     height:1000px;    }    #btn {     cursor:default;     background:blue;     width:50px;     height:30px;     line-height:30px;     text-align:center;    }      &lt;/style&gt;  &lt;/head&gt;  &lt;body&gt;   &lt;div id='null'&gt;空白区&lt;/div&gt;   &lt;div id="btn"&gt;点击&lt;/div&gt;&lt;!-- 按钮用DIV是因为原生按钮有圆角，不确定边界 --&gt;  &lt;/body&gt;    &lt;script type="text/javascript"&gt;   window.onload = function(){     var btn = document.getElementById('btn');    btn.onclick = function(e){     e = e|| window.event;     var box = (e.target || e.srcElement).getBoundingClientRect(),      offsetX = e.clientX - box.left,      offsetY = e.clientY - box.top;     p('x: '+ e.x+', y: '+e.y);     p('pageX: '+ e.pageX+', pageY: '+e.pageY);     p('offsetX: '+ e.offsetX+', offsetY: '+e.offsetY);     p('FF实现 offsetX: '+offsetX+', offsetY: '+offsetY);     p('layerX: '+ e.layerX+', layerY: '+e.layerY);     p('clientX: '+ e.clientX+', clientY: '+e.clientY);     p('body.scrollLeft: '+ document.body.scrollLeft+', body.scrollTop: '+document.body.scrollTop);     p('body.clientLeft: ' + document.body.clientLeft + ', body.clientTop: '+document.body.clientTop);     p('documentElement.scrollLeft: '+ document.documentElement.scrollLeft+', documentElement.scrollTop: '+document.documentElement.scrollTop);     p('documentElement.clientLeft: ' + document.documentElement.clientLeft + ', documentElement.clientTop: '+document.documentElement.clientTop);    }   }   function p(s){    console.log(s);   }  &lt;/script&gt;  &lt;/html&gt;

问：怎样获取鼠标相对于浏览器可视文档区域左上角的位置？

答：x, y和clientX, clientY皆可，但是x, y在IE下表示鼠标相对于文档开头的位置（即如果有滚到条的话，会计算在内），还有FF也不支持x, y

愿景：成为最专业的软件研发服务领航者
中睿信息技术有限公司广州•深圳	Tel：020-38931912	务实 Pragmatic
广州：广州市天河区翰景路1号金星大厦18层中睿信息	Fax：020-38931912	专业 Professional
深圳：深圳市福田区车公庙有色金属大厦509~510	Tel：0755-25855012	诚信 Integrity
所有权声明：PMI, PMP, Project Management Professional, PMI-ACP, PMI-PBA和PMBOK是项目管理协会(Project Management Institute, Inc.)的注册标志。