2011-03-13 5 views
3

私は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 要素にそれを比較することによって、自分自身のヒット のテストを行うことができると思います。しかし、もう一度、これは非常にハッキーに思われ、私は 良いアプローチがあるかと思います。

答えて

1

まず、SVGドキュメントで使用しているSVGバージョンとbaseProfileを指定する方がよいでしょう。

これまでのところ、SVGは(仕様で)those events、キープレスイベントをサポートしていません。ブラウザは仕様を少し上回っているため、サポートされていると見なすことができます。

DOM3イベントkeypressを使用しているので、doesn't exist in DOM 2 Eventsです。いかなる適切な入力要素がフォーカスがマウス位置ない

集束しない場合、キーイベント、ルート要素を処理する集束要素:

Event.target:
は、キー押下イベントのコンテキストに関する情報を見てみます。 SVG 1.1仕様では、 "focusable"属性はありませんが、SVG 2.0 draftにあります。

だから、バティックは間違った「キー押しイベント」の実装を使用します。 「mouseoverイベント」を使用して、どの要素をホバリングしているかを知ることができます。また、「フォーカス可能」属性がすでに一部のブラウザで動作しているかどうか試してみることもできます。

また、originalTargetとexplicitOriginalTargetはMozilla固有で非標準で、他のブラウザでの結果を説明しています。

関連する問題