私のページには、バナー広告を提供するさまざまな場所があります。これらの広告は、実行時にサード パーティのサイトから読み込まれ、サイズが異なります。
これらの各広告に透明な画像を追加して、誰かが広告をクリックしたときにクリック イベントをトリガーして何らかの処理を実行できるようにしようと考えています。私の質問は次のとおりです。
明らかに、画像を上に置いて、下にある実際の広告のクリックを止めたくはありません
あなたの質問に答えて：
まず、広告がページとは異なるドメインの iframe を使用している場合、できることははるかに制限されます。その場合、自分のページにあった透明なオブジェクトで広告を覆うことができます。これを行うと、広告はクリックを受けなくなります.
広告がページとは異なるドメインの iframe を使用していない場合、2 つの質問に対して次のオプションがあります。
1) JavaScript で透明な div を作成し、それを広告と同じ親に配置できます。それがあなたが本当にやろうとしていることであれば、広告の上にあるようにcssポジショニングで見つけることができます. その配置の詳細は、広告自体の配置方法によって異なります。または、広告自体が単一の div である場合は、透明な div を広告に挿入し、広告のすべての領域を正確にカバーするようにサイズを変更できます。透明なオブジェクトは最初のクリックを受け取りますが、クリックは広告である親まで「バブル」します。
2) 広告の上に配置された透明なオブジェクトをクリックすると、クリックは広告ではなく透明なオブジェクトに最初に移動します。クリックは、クリックされた最上位のオブジェクトに移動しますが、クリックは親オブジェクトにバブル アップします。したがって、広告自体が親オブジェクトである場合、クリックは広告にも移動します。
クリックについて知りたいだけの場合は、既存の広告のクリックに対して独自の eventListener を追加するだけで、その上に別のレイヤーを挿入しない方がよい場合があります。広告が表示されるまで待って、正しいオブジェクトを見つけ、独自の eventListener を挿入する必要があります (別のドメインの iframe を使用して広告が挿入されていないと仮定します)。
ドキュメント全体にクリック リスナーをアタッチし、クリックが発生するたびに、そのクリックが広告によるものかどうかを確認できます。そして、あなたの処理をしてください。