SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

クロスブラウザスクリプトの作成テクニック

ブラウザごとのeventオブジェクトの違いを理解する

クロスブラウザスクリプト作成時に問題となる、eventオブジェクトの用法とプロパティ


  • X ポスト
  • このエントリーをはてなブックマークに追加

ブラウザの種類やバージョン、ブラウザ独自の実装の違いを考慮し、異なるブラウザで同じように動作するスクリプトを「クロスブラウザスクリプト」と言います。ここでは、ブラウザによる「eventオブジェクト」の違いについて見ていきたいと思います。

  • X ポスト
  • このエントリーをはてなブックマークに追加

はじめに

 ブラウザの種類やバージョン、おのおのブラウザ独自の実装の違いを考慮し、同じように動作するスクリプトを「クロスブラウザスクリプト」と言います。この連載では、クロスブラウザスクリプトを実現する方法について順を追って解説してきています。

 クロスブラウザスクリプトを実現するためには、様々な方法があります。これまでの連載では、ブラウザの種類やバージョンを判断し、そのブラウザがサポートしているスクリプトを実行する方法を解説してきました。また、それ以外の方法として、実行するスクリプトをブラウザがサポートしているかどうか調べ、それに合わせて用意したスクリプトを実行する方法なども説明してきました。実際にクロスブラウザスクリプトを作成する時には、それらの方法を単独あるいは組み合わせて作っていくことになります。

 本来のJavaScriptの理想的な姿としては、JavaScriptをサポートしたブラウザであれば、1つのスクリプトで同じように動くべきなのでしょう。しかし、ブラウザによって細かな実装の違いがあるために、今まで解説してきたようなクロスブラウザスクリプトのテクニックが必要となってくるのです。

 実は、Internet ExplorerやFirefox、Opera、Safariなど一般的に使われているブラウザの現在最も普及しているバージョンでは、積極的にDOMがサポートされており、実装上の違いはそれほど多くありません。それでも、JavaScriptの中で比較的よく使われている「eventオブジェクト」と「windowオブジェクト」には多くの実装の違いが存在します。今回は、eventオブジェクトのブラウザによる実装の違いについて解説したいと思います。

 今回も前回までに解説してきたことをもとに進めていきます。前回までの内容も併せて参照するようにしてください。

過去の記事

eventオブジェクトの用法

 Internet Explorerと、Netscape NavigatorやFirefoxを含めたMozilla系ブラウザでのeventオブジェクトの実装の違いについては、これまでも何度か解説してきました。また、それに対するOperaやSafariの対応についても説明を重ねてきました。ここでもう一度、eventオブジェクトの用法をまとめておきましょう。

 eventオブジェクトを使ってオブジェクトからイベントを取得する方法は、Internet Explorer、Mozilla系ブラウザともに同じで次のような用法となります。

イベントの取得
イベントを取得するオブジェクト.取得するイベントタイプ
     = 関数 | スクリプト

 しかし、取得したイベントから値をとり出す用法には次のような違いがあります。

Internet Explorer
window.event.プロパティ
Mozilla系ブラウザ
変数.プロパティ

eventオブジェクトがサポートしているスクリプト

 では、eventオブジェクトが実際にどのようなスクリプトをサポートしているかを見ていきましょう。Internet ExplorerおよびMozilla系ブラウザがサポートしている主なスクリプトは次の通りです。

Internet Explorer
プロパティ 解説 備考
type イベントのタイプ  
screenX イベントが発生したスクリーン上のX座標(ピクセル)  
screenY イベントが発生したスクリーン上のY座標(ピクセル)  
clientX イベントが発生したクライアント上のX座標(ピクセル) pageXと同等
clientY イベントが発生したクライアント上のY座標(ピクセル) pageYと同等
offsetX イベントが発生した要素上のX座標(ピクセル)  
offsetY イベントが発生した要素上のY座標(ピクセル)  
keyCode マウスボタンが押されたり、押されたキーのASCIIの値  
メソッド
無し
イベント
全てのイベントタイプ
Mozilla系ブラウザ
プロパティ 解説 備考
type イベントのタイプ  
layerX イベントが発生したレイヤー上のX座標(ピクセル) Netscape Navigator 4.Xのみ
layerY イベントが発生したレイヤー上のY座標(ピクセル) Netscape Navigator 4.Xのみ
screenX イベントが発生したスクリーン上のX座標(ピクセル)  
screenY イベントが発生したスクリーン上のY座標(ピクセル)  
pageX イベントが発生したページ上のX座標(ピクセル) clientXと同等
pageY イベントが発生したページ上のY座標(ピクセル) clientYと同等
which マウスボタンが押されたり、押されたキーのASCIIの値  
keyCode マウスボタンが押されたり、押されたキーのASCIIの値 Netscape 6.0以降
メソッド
無し
イベント
全てのイベントタイプ

 OperaとSafariはInternet Explorer、Mozilla系ブラウザ両方のスクリプトをサポートしています。試しにInternet Explorer向けの用法とプロパティのみを使ったサンプル、Mozilla系ブラウザ向けの用法とプロパティのみを使ったサンプルをそれぞれ作り、いろいろなブラウザで実行してみましょう。

 このスクリプトは、ブラウザのコンテンツ表示領域内で「マウスボタンが押された時」をイベントとしてとらえます。そして、発生したイベントのタイプ、イベントが発生した左端からの位置(X座標)や上からの位置(Y座標)などの情報を、警告用のダイアログボックスに表示しています。なお、このスクリプトは「ブラウザによるイベントの取り扱いの違いを吸収する」で紹介したスクリプトを基にしているので併せて参照してください。

Internet Explorerの場合

 まずは、Internet Explorer用のスクリプトです。

Sample/Sample_1.html(抜粋)
<script type="text/javascript">
<!--
function eve() {
    alert (    "イベントのタイプ:" + window.event.type + "\n" +
               "イベントが発生したスクリーン上のX座標:" +
                  window.event.screenX+ "\n" +
               "イベントが発生したスクリーン上のY座標:" + 
                  window.event.screenY + "\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>
Internet Explorerでの実行結果
Internet Explorerでの実行結果
Operaでの実行結果
Operaでの実行結果
Safariでの実行結果
Safariでの実行結果

Mozilla系ブラウザの場合

 次にNetscape Navigator用のスクリプトです。

Sample/Sample_2.html(抜粋)
<script type="text/javascript">
<!--
function eve(e) {
    alert ( "イベントのタイプ:" + e.type + "\n" +
            "イベントが発生したスクリーン上のX座標:" +
            e.screenX+ "\n" +
            "イベントが発生したスクリーン上のY座標:" +
            e.screenY + "\n" +
            "イベントが発生したウインドウ上のX座標:" +
            e.pageX + "\n" +
            "イベントが発生したウインドウ上のY座標:" +
            e.pageY );
   return true;
}
document.onmousedown = eve;
//-->
</script>
Firefoxでの実行結果
Firefoxでの実行結果
Operaでの実行結果
Operaでの実行結果
Safariでの実行結果
Safariでの実行結果

 これにより、Internet ExplorerとMozilla系ブラウザはそれぞれのブラウザ用のスクリプトのみが実行でき、Opera、Safariは両方のブラウザ用のスクリプトが実行できることが分かると思います。

 それでは次に、eventオブジェクトがサポートしているスクリプトの注意点を詳しく見ていきましょう。

会員登録無料すると、続きをお読みいただけます

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

次のページ
レイヤー関連のプロパティ

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
クロスブラウザスクリプトの作成テクニック連載記事一覧

もっと読む

この記事の著者

半場 方人(ハンバ マサヒト)

Netscape2.XでJavaScriptに初めて出合ったころ、「なぜJavaScriptの日本語の書籍が無いんだ」、とあちこちで嘆いていたら、じゃあおまえが書け、とお声がかかり、JavaScript関連の書籍を執筆するようになる。執筆に際していつも考えるのは、「JavaScript初心者だった頃の気持ちを忘れないよに」、ということ。主な著書は、「標準Webデザイン講座 JavaScript&Ajax」(翔泳社)などがある。

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/2390 2008/08/26 13:54

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング