359

要素の上に別の絶対位置の要素がある要素でマウスイベントをキャプチャしようとしています。

現在、絶対位置にある要素のイベントがその要素にヒットし、その親にバブルアップしますが、これらのマウスイベントに対して「透過的」であり、その背後にあるものに転送する必要があります。これをどのように実装すればよいですか？

4

6 に答える 6

574 
pointer-events: none;

プロパティが適用されるHTML要素をイベントに「パススルー」させるCSSプロパティです。「下」の要素でイベントが発生します。

詳細については、https ：//developer.mozilla.org/en-US/docs/Web/CSS/pointer-eventsを参照してください。

IE11を含むほぼすべてのブラウザでサポートされています。グローバルサポートは05/'21で約98.2％でした）：http ： //caniuse.com/#feat=pointer-events（コメントにリンクを提供してくれた@ s4yに感謝します）。

于 2011-06-22T14:49:26.090 に答える
48

また、知っておくと便利です...
ポインターイベントは、親要素（おそらく透明なdiv）に対して無効にできますが、子要素に対しては有効にすることができます。これは、任意のレイヤーの子要素をクリックできるようにする必要がある複数の重複する div レイヤーで作業する場合に役立ちます。このため、すべてのペアレンティング div の getpointer-events: noneと click-children の get ポインター イベントを再度有効にします。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>
于 2014-11-07T11:08:03.390 に答える
9

イベントを受信して​​いない理由は、絶対配置された要素が「クリック」したい要素 (青い div) の子ではないためです。私が考えることができる最もクリーンな方法は、絶対要素をクリックしたい要素の子として配置することですが、それができないか、この質問をここに投稿しなかったと思います:)

もう 1 つのオプションは、absolute 要素のクリック イベント ハンドラーを登録し、青い div のクリック ハンドラーを呼び出して、両方を点滅させることです。

イベントが DOM を介してバブルアップする方法のため、より簡単な答えがあるかどうかはわかりませんが、他の誰かが私が知らないトリックを持っているかどうか非常に興味があります!

于 2009-06-17T22:20:42.627 に答える
4

イベントをある div から別の div に手動でリダイレクトする JavaScript バージョンが利用可能です。

私はそれをきれいにしてjQueryプラグインにしました。

Github リポジトリは次のとおりです: https://github.com/BaronVonSmeaton/jquery.forwardevents

残念ながら、私がそれを使用していた目的-Googleマップにマスクを重ねてもクリックアンドドラッグイベントがキャプチャされず、マウスカーソルが変更されないため、ユーザーエクスペリエンスが十分に低下するため、IEとOperaでマスクを非表示にすることにしました-ポインター イベントをサポートしていない 2 つのブラウザー。

于 2013-03-27T16:51:45.913 に答える
1

マウス イベントが必要な要素がわかっている場合、およびオーバーレイが透過的である場合は、それらの z-index をオーバーレイより高い値に設定するだけです。もちろん、その場合、すべてのイベントはすべてのブラウザで機能するはずです。

于 2012-02-25T18:02:33.050 に答える