layerX/layerY 和 offsetX/layerY

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

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

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

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

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

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
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;
}
</script>
<style type="text/css">
#oDiv {
    width: 200px;
    height: 200px;
    background: blue;
    border: 5px solid red;
    margin: 100px;
    position: relative;  /*设置了 postion 定位,layerX 和 offsetX 几乎相等,就是参考点不同。如果不设置,firefox 将参考 body,而 IE 还是参考该 div。*/
};
</style>
</head>
<body>
<div id="oDiv"><div>
</body>
</html>






你可能感兴趣的:(layerX/layerY 和 offsetX/layerY)