24

HTMLドキュメント内のポイントの座標（X、Y）があります。これらの座標にあるDOMノードを特定するにはどうすればよいですか？

いくつかのアイデア：

  • ポイント（X、Y）を取り、そこにDOM要素を返す、見逃したDOMヒットテスト関数はありますか？
  • DOM要素ツリーを歩いて含まれている要素を見つける効率的な方法はありますか？これは、要素が絶対的に配置されているため、注意が必要なようです。
  • ブラウザが要素へのポインタを持つイベントオブジェクトを作成するように、特定の（X、Y）位置でイベントをシミュレートする方法はありますか？

（背景：ネイティブアプリケーションにQtのQWebViewを埋め込んでいます。マウスが置かれているDOMノードに基づいてQtウィジェットが提供するコンテキストメニューを変更しようとしていますが、Qt4.5はDOM要素のテストにヒットできません。ただし、その機能は4.6で提供される予定です。したがって、座標をJavascriptに入れて、そこでDOM APIを使用してヒットテストを実行できることを期待しています。）

ありがとう！

4

5 に答える 5

25

ユーザーが古いバージョンのSafari、Chrome、またはOperaを使用していない限り、幸運です。使用してくださいdocument.elementFromPoint(x, y)（MSDN ref、Mozilla ref、QuirksModeの記事）：

ドキュメントから要素を返します...これは、指定されたポイントの下にある最上位の要素です。

古いブラウザをサポートする必要がある場合は、提案する以外の多くのオプションを考えることはできません（DOM全体をトラバースし、要素の位置とサイズを調べて、それらのいずれかが（x、y）をカプセル化するかどうかを確認します）。

イベントシミュレーションは機能しないと思いますが、それは興味深いアイデアです。イベントディスパッチについての私の理解は、イベントの対象となるターゲットを指定することです。これは、そもそもまさにあなたが見つけようとしているものです。

于 2009-10-15T01:27:07.637 に答える
2 
document.elementFromPoint(x,y)

Firefox 3についてはここに、IEについてはここに文書化されていますが、ブラウザー間の違いについてはquirksmodeを参照してください。

于 2009-10-15T01:32:44.023 に答える
1

IEには存在しdocument.body.componentFromPoint(x,y)ます。クロスブラウザの実装があるかどうかはわかりません。

于 2009-10-15T01:27:47.357 に答える
1

これはおそらく最善の解決策ではありませんが、x位置とy位置を含む祖先ノードの座標を見つけることから始めて、domツリーをトラバースし、座標を含むリーフノードにすばやく到達することができます。クロスブラウザ方式でノードの位置を取得するには、JSツールキットを参照してください。私が使ったのは道場です。ここでdojo._getMarginBoxを見てください

于 2009-10-15T01:29:57.647 に答える
0

そのためにjQueryを使用できます。必要なすべてのdom要素をクリックイベントにバインドします。これにより、クリック時とマウス位置に適切なdomオブジェクトが表示されます。

于 2009-10-15T03:04:59.490 に答える