2

JavaScriptを使用してWebサイトを作成しています。JS 部分の目的は、独自のキーボード ハンドラーを特定のテキスト フィールドにアタッチすることです。問題を次のフィドルのような単純なコードに絞り込むことができました:
http://jsfiddle.net/k9s3n/1/ Firefox、Opera、および Chrome では、3 つのフィールドのいずれか
に 文字を入力すると、アラート ボックスが表示されます。キーコード付き。ただし、Internet Explorer (私の場合は IE8、私が通常サポートする最も低いバージョン) では、適切にしか機能しません。つまり、キーを放したときにダイアログ ボックスを表示する唯一のフィールドです。他の 2 つのボックスに入力しようとしても結果は得られず、コンソールにエラーが記録されるだけです(エラー メッセージが正しいかどうかわからないので、母国語から翻訳しました)。input3
keyCode is null or isn't an object
ブラウザーに関係なく、3 番目のソリューションのみが機能するようですが、私のシナリオでは、最初のソリューションまたは 2 番目のソリューションを使用する必要があります。

さらに調査するために別のフィドルを作成しました:
http://jsfiddle.net/bSdaJ/
両方のボタンをクリックすると、メッセージ ボックスが表示されます。Firefox、Opera、および Chrome では、ボックスに「[object MouseEvent]」と表示されますが、IE では「未定義」と表示されます。
それについて私は何ができますか?事前に助けてくれてありがとう。

PS最初のフィドルで示されているように、インラインイベント処理を使用するとすべて正常に動作します。ただし、このプロジェクトでの私の目標は HTML と JS を完全に分離することなので、それを使用することはできません。友人のためにやっているのですが、HTML 部分をプレーンで明確なマークアップ コードにしたいと考えています。

4

3 に答える 3

4

DOM 0イベント(HTML属性を介して添付されたイベント)を使用しないでください。element.addEventListenerW3Cブラウザおよびelement.attachEventIEで使用して接続されたイベントリスナーを使用する必要があります。大規模なWebサイトを構築している場合は、JSフレームワークを使用する必要がありますが、それはあなたが尋ねなかった別の質問です。フレームワーク(最も人気のあるjQuery)は、これを行うための抽象的なメソッドを提供しますが、フレームワークがない場合は、クロスブラウザーでそれを行うための単純な関数を次に示します。

function addEvent(element,evName,fn) {
    if (element.addEventListener) {
        element.addEventListener(evName,fn,false);
    } else if (element.attachEvent) {
        element.attachEvent('on'+evName,function(e) {
            fn(e || window.event);
        });
    }
}

この単純な関数は、機能検出を使用して、ブラウザー間のさまざまなイベント動作を正規化します。IEは、異なるシグネチャを持つ異なるリスナー関数を使用します。また、IEは、ハンドラーがイベントオブジェクトを引数として受け取ることを要求するW3C仕様にも準拠していません。代わりに、グローバルwindow.event`プロパティを設定します。

使用例:http://jsfiddle.net/k9s3n/3/

IEブラウザとW3Cブラウザでは、プロパティに対するアプローチが異なることにも注意してくださいevent.keyCode(他のブラウザのアプローチが正しいという点で)。

于 2012-04-11T19:26:59.600 に答える
2

これを試して:

function clickHandler(e) {
    if(!e)
        e = window.event;
    alert(e);
}
于 2012-04-11T19:20:09.153 に答える