私はSVGをベースにしたテキストエディタを開発していましたが、今は にして、複数のインスタンスを単一のSVG 文書でインスタンス化できるようにしようとしています。私がこれを達成しようとしてきた方法は、各テキストエディタインスタンスのDOM 表現を1つの親要素 要素(またはのいずれか)で囲み、keypressイベント リスナをその親要素に添付することです。しかし、私が問題にしているのは、 です。これは、keypressイベントがドキュメント ルートによってのみ受信されたようです。さらに、私が試したすべてのブラウザSVGの実装では、 target、originalTarget、およびexplicitOriginalTargetのイベントプロパティ が存在する場合はドキュメントルートにも設定されているため、 イベントはハックする可能性があります1つの イベントリスナーをドキュメントルートに添付して、イベントのoriginalTargetプロパティを読み取って手動で イベントをディスパッチすることによって解決できます。非ルート要素にkeypressイベントリスナーを登録するには?
はこれまでのところ、私は次のテストケースでは、Firefox 3.6、クロム9、オペラ11、およびバティック くねくね1.7をテストしてみた:
http://stuff.echo-flow.com/svg-developers/testEventListener.svg
のみバティックRECTと、期待通りに動作します要素は、 keypressイベントを受け取ります。 Firefoxでは、target、originalTarget、および explicitOriginalTargetはすべてルート要素と同じです。 Chromium とOperaでは、targetはルート要素に設定され、originalTargetと explicitOriginalTargetは未定義です。
基本的に、私がやっていることは、キー押しイベントを に元々戻した要素に関連付けることです。私はおそらく を私はHTMLのコンテキストと埋め込まれたiframeを使用すると動作することができると思う;または、 がforeignObject内部のiframeを使用している場合。しかし、 iframeの使用を必要としないクリーナーの回避策があるかどうかは疑問です。
はさらに、私は最悪のシナリオとして、私はキー入力 イベントのclientX/clientYプロパティのプロパティを検査し、すべてのテキストエディタグループのbboxes 要素にそれを比較することによって、自分自身のヒット のテストを行うことができると思います。しかし、もう一度、これは非常にハッキーに思われ、私は 良いアプローチがあるかと思います。