回答:
pointer-events: none;イベントが適用される要素を「通過」させ、「下」の要素でイベントを発生させるCSSプロパティです。
詳細については、https：//developer.mozilla.org/en/css/pointer-eventsを参照してください。
IE 11まではサポートされていません。他のすべてのベンダーはかなり前からそれをサポートしています（グローバルサポートは12 / '16では〜92％でした）：http : //caniuse.com/#feat=pointer-events（コメントにリンクを提供してくれた@ s4yに感謝） 。
pointer-events それでものサポートはそれほど素晴らしいものではありませんが、改善されています。より互換性のあるオプションについては、@ JedSchmidtの回答を参照してください。
必要なのがマウスダウンだけの場合は、次のdocument.elementFromPoint方法でメソッドを実行できる可能性があります。
xとy座標をイベントからdocument.elementFromPointメソッドに渡して、その下の要素を取得し、次にまた
、親要素（おそらく透明なdiv）でポインターイベントを無効にして、子要素で有効にすることもできます。これは、任意のレイヤーの子要素をクリックできるようにしたい、複数の重複するdivレイヤーで作業する場合に役立ちます。このため、すべてのpointer-events: none子のdivはget とclick-childrenはポインタイベントを再度有効にします。pointer-events: all
.parent {
pointer-events:none;
}
.child {
pointer-events:all;
}
<div class="some-container">
<ul class="layer-0 parent">
<li class="click-me child"></li>
<li class="click-me child"></li>
</ul>
<ul class="layer-1 parent">
<li class="click-me-also child"></li>
<li class="click-me-also child"></li>
</ul>
</div>pointer-events:noneと子ノードが影響を受けたの差し迫ったレットダウン、あなたは:)救う
.parent * { pointer-events:all; }、子供向けですか？
イベントを受信しない理由は、絶対配置された要素が「クリック」する要素（青のdiv）の子ではないためです。私が考えることができる最もきれいな方法は、クリックしたいものの子として絶対要素を置くことですが、私はあなたがそれを行うことができないか、あなたがこの質問をここに投稿しなかったと思います:)
別のオプションは、absolute要素のクリックイベントハンドラーを登録し、青いdivのクリックハンドラーを呼び出して、両方を点滅させることです。
イベントがDOMを介してバブルアップする方法のため、より簡単な答えがあるかどうかはわかりませんが、他の誰かが知らないトリックを持っているかどうか非常に興味があります！
あるdivから別のdivに手動でイベントをリダイレクトする利用可能なJavaScriptバージョンがあります。
私はそれをクリーンアップしてjQueryプラグインにしました。
これがGithubリポジトリです：https : //github.com/BaronVonSmeaton/jquery.forwardevents
残念ながら、私がそれを使用していた目的-Googleマップ上にマスクをオーバーレイすると、クリックイベントとドラッグイベントがキャプチャされず、マウスカーソルが変化しないため、IEとOperaでマスクを非表示にすることを決定しただけのユーザーエクスペリエンスが低下します-ポインタイベントをサポートしない2つのブラウザ。
マウスイベントを必要とする要素がわかっていて、オーバーレイが透明である場合は、それらのz-indexをオーバーレイよりも高い値に設定できます。もちろん、その場合、すべてのイベントがすべてのブラウザーで機能するはずです。
pointer-events存在していなかったと思います！ある時点で、受け入れられた回答をこの回答に切り替える場合があります。