web-dev-qa-db-ja.com

マウスイベントを絶対配置要素に渡す

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

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

javascripthtmleventsdomjavascript-events
278
s4y
pointer-events: none;

イベントが適用される要素を「通過」させ、イベントを「下」の要素で発生させるCSSプロパティです。

詳細については、以下を参照してください： https://developer.mozilla.org/en/css/pointer-events

IE 11まではサポートされていません。他のすべてのベンダーはかなり前からサポートしています（グローバルサポートは12/'16で〜92％）： http://caniuse.com/#feat=pointer-events （@ s4yに感謝しますコメントにリンクを提供します）。

441
JanD

必要なのがマウスダウンだけの場合、次の方法で document.elementFromPoint メソッドで対応できる場合があります。

  1. マウスダウンで最上層を削除し、
  2. xおよびy座標をイベントからdocument.elementFromPointメソッドに渡し、その下の要素を取得してから、
  3. 最上層を復元します。
48
Jed Schmidt

知っておくといいのですが...
ポインターイベントは、親要素（おそらく透明なdiv）では無効にできますが、子要素では有効にできます。これは、任意のレイヤーの子要素をクリックできるようにしたい、複数のオーバーラップするdivレイヤーで作業する場合に役立ちます。このため、すべてのペアレントdivはpointer-events: noneを取得し、クリック子は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>
35
Allisone

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

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

DOMを介してイベントが発生するため、より簡単な答えがあるかどうかはわかりませんが、他の誰かが私が知らないトリックを持っている場合、私は非常に興味があります！

7
Loktar

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

クリーンアップしてjQueryプラグインにしました。

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

残念ながら、私がそれを使用していた目的-マスクをGoogleマップにオーバーレイしてもクリックおよびドラッグイベントがキャプチャされず、マウスカーソルが変化せず、IEおよびOpera-ポインターイベントをサポートしていない2つのブラウザー。

3
Mikepote

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

1
ricosrealm