レイヤー関連のプロパティ
Mozilla系ブラウザ用プロパティのうち、layerXプロパティとlayerYプロパティはレイヤーの位置に関する情報を持つプロパティとなります。そのため、このプロパティは、レイヤーに唯一対応しているブラウザであるNetscape Navigator 4.Xでしか使用できません。JavaScriptを使用したレイヤーの取り扱いについては、「スタイルシートやレイヤーを操作する」「ブラウザがサポートしているスクリプトを判断する」「ブラウザがサポートしているスクリプトを判断する 2」などでも解説しているので併せて参照してください。
イベントの発生した位置を提供するプロパティ
eventオブジェクトには、イベントが発生した位置を値に持つ多くのプロパティが用意されています。その中で、「イベントが発生したスクリーン上の位置」の値を持つscreenXプロパティとscreenYプロパティは、Internet Explorer、Mozilla系ブラウザの両方でサポートしています。このプロパティの値はOpera、Safariでも同じ値となります。
また、Internet ExplorerのclientXプロパティとclientYプロパティ、Mozilla系ブラウザのpageXプロパティとpageYプロパティはともに、イベントが発生したウインドウ内の「コンテンツ表示領域上の位置」を値に持ちます。このプロパティの値も、Internet Explorer、Mozilla系ブラウザ、Opera、Safariで同じ値となります。
これに対し、Internet ExplorerのoffsetXプロパティとoffsetYプロパティは、イベントが発生したウインドウ内の「コンテンツ表示領域内に存在する要素上の位置」を値に持っています。「Sample_1」（Sample/Sample_1.html）を見ても分かるように、コンテンツ表示領域内に何も「要素」が存在しない場合でも、ブラウザによってはclientXプロパティ、clientYプロパティとoffsetXプロパティ、offsetYプロパティの値に差がある場合があります。また、offsetXプロパティ、offsetYプロパティの値は、このプロパティをサポートしているブラウザ間でも違いがあります。これは、各ブラウザの作りによるものなので、ユーザ側ではどうすることもできません。この違いは、数ピクセルとあまり大きな差ではありません。しかし、これがコンテンツ表示領域内に何らかの「要素」が存在する場合では、話が違ってきます。試しに、次のサンプルを実行してみましょう。サンプルではbody要素内にdiv要素を設定しています。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html><head> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Style-Type" content="text/css"> <title>Sample_3</title> <script type="text/javascript"> <!-- function eve() { alert ( "イベントのタイプ：" + window.event.type + "\n" + "イベントが発生したウインドウ上のX座標：" + window.event.clientX + "\n" + "イベントが発生したウインドウ上のY座標：" + window.event.clientY + "\n" + "イベントが発生した要素上のX座標：" + window.event.offsetX + "\n" + "イベントが発生した要素上のY座標：" + window.event.offsetY ) return true; } document.onmousedown = eve; //--> </script> <style type="text/css"> <!-- body { background-color: #ffffff; } --> </style> </head> <body> <div id='STY' name='STY' style= 'position:absolute;left:50px;top:100px;width:300px; height:200px;background:Tan'> div要素... </div> </body></html>
clientXプロパティ、clientYプロパティとoffsetXプロパティ、offsetYプロパティの違い
各プロパティの値に注目してください。
このサンプルのdiv要素の上でマウスボタンを押した場合、clientXプロパティとclientYプロパティの値は、イベントが発生したウインドウ内の「コンテンツ表示領域の左上角からの値」となります。それに対しoffsetXプロパティとoffsetYプロパティの値は、「div要素の左上角からの値」となります。
サンプルの場合、div要素はウインドウ内のコンテンツ表示領域左端から50ピクセル、上から100ピクセルの位置に表示しています。このため、div要素内でイベントが発生した場合、要素が何もない場合と同様（ブラウザによって多少の誤差はありますが）、clientXプロパティとoffsetXプロパティは約50ピクセル、clientYプロパティとoffsetYプロパティは約100ピクセルの差が発生することになります。
このように、コンテンツ内に何らかの「要素」が存在する場合、clientXプロパティ、clientYプロパティとoffsetXプロパティ、offsetYプロパティの値には、大きな差が出てきます。もしも、ウインドウ内のコンテンツ表示領域で、イベントが発生した位置の値を利用したクロスブラウザスクリプトを作成する場合、Mozilla系ブラウザのpageXプロパティ、pageYプロパティと値を合わせることができるので、Internet Explorer用の処理では、clientXプロパティ、clientYプロパティを使った方が、より分かりやすいでしょう。
また、offsetXプロパティ、offsetYプロパティを使った場合、これらのプロパティに対応したブラウザでも、ブラウザ間で発生する数ピクセルの値の差が問題になってくるかもしれません。
