jsで重なった要素の下のクリックを有効にしつつ、上の要素でクリックイベントを発火できないか？

Question

自身で運営しているウェブサイトに貼った広告のクリックを自前でカウントできないか模索しています。

ページが大量にあり、同じタグがはられているページがたくさんあるので、アドネットワークでのタグごとの集計ではどのページでいつクリックされたかなどの詳細な情報がわかりません。

取得するために広告タグを貼り付ける部分にクリック判定用のdivタグを上に重ねる形で設置して（以下でclass="click_area"とします）以下のように、クリックされた判定できるようにしたいと考えました。

$(".click_area").click(fucntion(){
console.log("クリックされました");
});

しかし、広告エリアの上にこの$(".click_area")を重ねると、下の広告がクリックできないですし、

.click_area{
pointer-events: none;
}

とすると、クリックできますが、上記のJS内での検知ができなくなります。

クリックを透過させつつ、js側ではクリック、もしくはtouch系のイベントを発火させることはできないのでしょうか？

また、上記の方法以外でも広告タグの中のiframeなどでのクリックを広告タグ貼り付け元の自身のサイト側で検知することができればそれでも構いません。

どうぞよろしくお願いいたします。

Answer 1

広告タグの中のiframeなどでのクリックを広告タグ貼り付け元の自身のサイト側で検知する

過去ログの下記が参考になりそうです。

iframe内をタッチしたらイベントが起きるようにしたい

あとは、下記も。
【JQuery】iframe内をタップしたらイベントを発火させる ： nymemo

Answer 2

クリック判定用のdivタグを上に重ねる形

重ねないでbodyのクリックイベントを拾えば良いのではないでしょうか？

Comments

[YT0014]

子要素(この場合広告タグ)側で先に処理が行われており、親要素であるbodyへのクリックイベントが止められる可能性があるのでは？

[a.‫com]

ご指摘の通りその可能性はありますね。失礼しました。

[Zuishin]

私の回答に次々とスパムだなんだと意味不明な修正依頼を入れている理由をどうぞ。
暇なの？

[Zuishin]

今まで正しい回答にいつも低評価を入れていたストーカーもこれでわかった。