web-dev-qa-db-ja.com

マウスクリックが発生したhtml要素を取得しますか?

Javascriptで、マウスクリックが発生するhtmlページの要素を特定できるようにしたいと思います。要素にはイベントリスナーがアタッチされていないことに注意してください。

基本的に:ページのどこかにカーソルを置き、ユーザーがマウスをクリックし、マウスクリックイベントをキャプチャし、クリックが発生した要素を取得します。これは可能ですか?

私が考えたアプローチの1つは、クリックイベントのx、y座標を取得し、DOMを反復処理して各要素の位置を取得し、クリックイベントを含む最も内側の要素を見つけることです。少し長蛇の列に聞こえますが、別の方法があるかどうか疑問に思っていました。

19
Richard H

http://www.quirksmode.org は、イベントについて多くのことを説明しているとても素敵なWebサイトです。

特にあなたの質問の場合: イベントプロパティ-どのHTML要素がイベントのターゲットですか?

Internet Explorerでは、eventオブジェクトから event.srcElement[docs] および他のすべてのブラウザでは event.target[docs]

リンクした例の「Safariバグ」の回避策も参照してください(ただし、それがまだ存在するかどうか、および/またはSafariのどのバージョンにあるかはわかりません)。

17
Felix Kling

event.target を試してください。そのページには、その使用方法を示す例があります。

5
Douglas