2010年8月24日火曜日

IE対策 - クリックEventの取得について

JavaScriptを使用して、イベント(Event)を取得し、そのイベントの動作を
制御したい場合に以下の点でハマることがあります。

・確認画面(windows.confirm)やモーダルウィンドウ($.modal)などを使用して
ダイアログを開いた状態のまま処理を停止したい時に、停止すべき"Event"を取得することができない

実際のソースコードでは以下のような場合にInternet Explorer 7および8で上手く動きません。

【例1】

            function showDetail( event , kwds , argv ){
                event.preventDefault();    //イベントを取得してそのイベントを一時的に止めておくための処理
            }

            <button onclick="showDetail(event,message,value)">クリック</button>


上記のソースで上手く動かないポイントは「event.preventDefault()」を実行した際に、
引数で「event」が渡っているにも関わらず、IEのJavaScript判定ではこのeventを取得
出来ない、というところです。

これを正しく動作するようにするためには以下のように書き換える必要があります。


【例1改】

            function showDetail( event , kwds , argv ){
                $("#clickme").click(function(event){
                    event.preventDefault();    //イベントを取得してそのイベントを一時的に止めておくための処理
                });
            }

            <button id="clickme" onclick="showDetail(event,message,value)">クリック</button>


上記のように「あるidをクリックした」という事実を「.click」や「.submit」を使用して
その引数にeventを渡してあげることでIE7&8でもSafariでもFirefoxでもChromeでも正しく動くようになります。

0 件のコメント:

コメントを投稿