JavaScriptのlayerXとoffsetXの違い
JavaScriptには、e.clientX、e.screenXなどのさまざまな座標系があります。
私はこれら2つをよく理解していますが、e.layerXやe.offsetXのようなものもあります。これらの2つは私にはあまり明確ではありません。
誰かが私のためにそれらの2つの座標を説明できますか？
offsetX/offsetYは、Microsoftによるマウスイベントオブジェクトへのきちんとした拡張であり、ターゲット要素に対するマウスポインタの位置を意味します。残念ながら、これらはFirefoxによって実装されておらず、他のブラウザ間で原点となるものについて不一致があります。IEはコンテンツボックスだと考えていますが、Chromeは、OperaおよびSafari パディングボックス（絶対位置の要素の同じ原点であるため、より理にかなっています）。
layerX/layerYは、Geckoベースのブラウザ（Firefox et al。）によって定義されたMouseEventオブジェクトのプロパティです。 offsetX/offsetYの代わりになると言う人もいます-そうではありません。これらは、「最も近い位置にある要素」、つまりpositionスタイルプロパティがstaticではない要素に対するマウスの位置です。静的に配置されている場合、これはターゲット要素ではありません。
これらはChromeとOperaでサポートされていますが、非推奨であり、まもなく削除される予定です。忘れてください。
LayerXおよびLayerYイベントを発生させる要素の最も近い位置にある祖先要素の左上隅を基準にしたマウスポインタのx座標、y座標をそれぞれ取得します。
OffsetX、OffsetYは、イベントを発生させる要素のoffsetParent要素の左上隅を基準にしたマウスポインタのx座標、y座標を設定または取得します。オフセット親要素は、現在の要素の位置が計算されるDOM階層内の最も近い祖先要素への参照を返します。