eventオブジェクト
モダンブラウザ間は、DOMオブジェクトに関する実装の違いはありません。 しかし、「eventオブジェクト」と「windowオブジェクト」には実装の違いが存在します。
ブラウザは以下3つのグループにわかれます。 ①IE ②Mozilla系→Netscape Navigator,Firefox ③Opera,Safari
取得したイベントから値をとり出す方法の違いは以下の通りです。
①IEの場合 window.event.プロパティ
②Mozilla系の場合 変数.プロパティ
③Opera,Safariの場合 両方とも対応できている(?)
それぞれのブラウザで使用できるプロパティは以下の通りです。 ③は、①と②の両方のプロパティを使用可能です。
Opera/Safari | |||||
---|---|---|---|---|---|
IE | Mozilla系(Netscape Navigator/FireFox) | ||||
プロパティ | 解説 | 備考 | プロパティ | 解説 | 備考 |
type | イベントのタイプ | type | イベントのタイプ | ||
layerX | イベントが発生したレイヤー上のX座標(ピクセル) | Netscape Navigator 4.Xのみ | |||
layerY | イベントが発生したレイヤー上のY座標(ピクセル) | Netscape Navigator 4.Xのみ | |||
screenX | イベントが発生したスクリーン上のX座標(ピクセル) | screenX | イベントが発生したスクリーン上のX座標(ピクセル) | ||
screenY | イベントが発生したスクリーン上のY座標(ピクセル) | screenY | イベントが発生したスクリーン上のY座標(ピクセル) | ||
pageX | 表示しているページの左上からの座標を取得 | ||||
pageY | 表示しているページの左上からの座標を取得 | ||||
clientX | 現在ブラウザで表示している領域の左上からの座標を取得。 | スクロールバーがでなければ、pageXと同じ | |||
clientY | 現在ブラウザで表示している領域の左上からの座標を取得。 | スクロールバーがでなければ、pageYと同じ | |||
offsetX | イベントが発生した要素上のX座標(ピクセル) | ||||
offsetY | イベントが発生した要素上のY座標(ピクセル) | ||||
keyCode | マウスボタンが押されたり、押されたキーのASCIIの値 | keyCode | マウスボタンが押されたり、押されたキーのASCIIの値 | Netscape 6.0以降 | |
which | マウスボタンが押されたり、押されたキーのASCIIの値 | ||||
座標の取得プログラムです。 ClientとPageはスクロールバーをだすと値がちがってきます。
See the Pen QqLoKV by satsuki mori (@satsuki) on CodePen.
プロパティもまぎらわしいですね。。
screenX,screenY→スクリーン(モニター)上の座標を取得
clientX,clientY(PageX,PageY)→現在ブラウザで表示している領域の左上からの座標を取得。
参考サイト