鼠标相对于引起事件的对象的 X/Y 坐标：

offsetX/offsetY：IE 特有，以引起事件的对象为参考点，从内容区域的左上角计算，如果有 border 可能出现负值。

layerX/layerY： Firefox 特有，以页面 body 为参考点，如果引起事件的对象设置了 position 定位，那么和 IE 一样也以引起事件的对象为参考点，从触发元素盒子模型的 border 的左上角计算。

也就是当触发元素设置了 position 定位后，layerX/layerY 和 offsetX/offsetY 几乎相等，唯一不同就是 Firefox 以 border 为参考点， IE 以内容为参考点。

可以拿下面的代码分别在 IE 和 Firefox 下测试一下。

    
     
      window.onload = function() {    var oDiv = document.getElementById("oDiv");    oDiv.onclick = function(evt) {        evt = evt || fixEvent(window.event);        alert("layerX == " + evt.layerX + "\nlayerY == " + evt.layerY);    }};function fixEvent(evt) { // 给 IE 浏览器事件对象添加 layerX 和 layerY 属性，这样后面就可以用相同的名字调用了    evt.layerX = evt.offsetX;    evt.layerY = evt.offsetY;    return evt;}
      
       #oDiv {    width: 200px;    height: 200px;    background: blue;    border: 5px solid red;    margin: 100px;    position: relative;  /*设置了 postion 定位，layerX 和 offsetX 几乎相等，就是参考点不同。如果不设置，firefox 将参考 body，而 IE 还是参考该 div。*/};