layerX/layerYとoffsetX/layerY
1378 ワード
イベントを引き起こすオブジェクトに対するマウスのX/Y座標:
offsetX/offsettY:IE特有で、イベントを引き起こすオブジェクトを参照点として、borderがあればコンテンツ領域の左上隅から計算します.
LayerX/layerY:Firefox特有で、ページbodyを参照点とし、イベントを引き起こすオブジェクトにposition位置決めが設定されている場合、IEと同様にイベントを引き起こすオブジェクトを参照点として、エレメントボックスモデルをトリガするborderの左上隅から計算されます.
すなわち、トリガ要素がposition位置決めを設定した場合、layerX/layerYとoffsetX/offsetYはほぼ等しく、唯一の違いはFirefoxがborderを参照点とし、IEがコンテンツを参照点とすることである.
以下のコードをIEとFirefoxでそれぞれテストしてもいいです.
offsetX/offsettY: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 + "
layerY == " + 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>