2017-11-22 8 views
0

構造体<a><img></img></a>(潜在的により深くネストされている)が動的に生成されます(これはページ上の唯一のコンテンツであると想定しています)。私はa要素のクリックイベントを聞きたいです。動的に生成されるので、リスナーをドキュメントに添付してから、event.targetをチェックする必要があります。しかし、私が興味を持っている要素には子孫があるので、event.targetは画像を指しています。これどうやってするの?子孫がクリックされても、動的に生成された要素のクリックを検出するにはどうすればよいですか?

+0

その親を見ますか? – SLaks

+0

私はあまり単純化された例を使用したと思うので、ちょっと解明しました。私は構造がどれほど深いかわからず、 "DOMブランチの要素がセレクタに一致するかどうかをチェックする"という一般的な解決策を望んでいます。私は手動で木を上ってすべての要素をチェックすることができますが、これはむしろ非効率的で、特にあまり美味しくないようです。 – Dariush

+0

あなたはループで木を歩く必要があります。 – SLaks

答えて

0

一致する要素が見つかるまで、ターゲットの親を上にループする必要があります。

findAncestor(callback)関数を使用すると、このクリーナーを作成できます。

Element.matches() methodを使用することもできます(ブラウザのサポートには注意してください)。

+1

['.closest()'メソッド](https://developer.mozilla.org/en-US/docs/Web/API/Element/closest)(必要に応じてpolyfillを使用する場合と使用しない場合)は、カスタム 'findAncestor()'関数 – nnnnnn

+0

ちなみに、画像をクリックしたとき、ブラウザはそのような画像のリンクをリンクでどのように処理しますか?彼らはこれのように上にループしますか? – Dariush

関連する問題