Passa gli eventi del mouse attraverso l'elemento assolutamente posizionato

Sto tentando di catturare eventi del mouse su un elemento con un altro elemento assolutamente posizionato sopra di esso.

In questo momento, gli eventi sull'elemento assolutamente posizionato lo colpiscono e si gonfiano verso il suo genitore, ma voglio che sia "trasparente" a questi eventi del mouse e li inoltri a tutto ciò che c'è dietro. Come dovrei implementarlo?

pointer-events: none;

È una proprietà CSS che fa "passare" gli eventi all'elemento a cui viene applicato e fa sì che l'evento si verifichi sull'elemento "sotto".

Per i dettagli, consultare: https://developer.mozilla.org/en/css/pointer-events

Non è supportato fino a IE 11; tutti gli altri fornitori lo supportano da un po 'di tempo (il supporto globale era ~ 92% in 12 / '16): http://caniuse.com/#feat=pointer-events (grazie a @ s4y per aver fornito il link nei commenti) .

Se tutto ciò di cui hai bisogno è mousedown, potresti essere in grado di accontentarti del document.elementFromPointmetodo:

1. rimuovere lo strato superiore su mousedown,
2. passando le coordinate xe ydall'evento aldocument.elementFromPoint metodo per ottenere l'elemento sottostante e quindi
3. ripristinare lo strato superiore.

Anche bello sapere ...
Gli eventi puntatore possono essere disabilitati per un elemento genitore (probabilmente div trasparente) e tuttavia essere abilitati per gli elementi figlio. Questo è utile se lavori con più div layer sovrapposti, in cui vuoi poter fare clic sugli elementi figlio di qualsiasi layer. Per questo tutti i div parenting ottengono pointer-events: nonee click-children ottengono riattivati ​​eventi puntatorepointer-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>

Il motivo per cui non si riceve l'evento è perché l'elemento posizionato in modo assoluto non è figlio dell'elemento che si desidera "fare clic" (div blu). Il modo più pulito a cui riesco a pensare è quello di mettere l'elemento assoluto come figlio di quello su cui vuoi fare clic, ma suppongo che non puoi farlo o non avresti pubblicato questa domanda qui :)

Un'altra opzione sarebbe quella di registrare un gestore di eventi click per l'elemento assoluto e chiamare il gestore click per il div blu, facendo lampeggiare entrambi.

A causa del modo in cui gli eventi si diffondono nel DOM, non sono sicuro che ci sia una risposta più semplice per te, ma sono molto curioso di sapere se qualcun altro ha qualche trucco che non conosco!

È disponibile una versione javascript che reindirizza manualmente gli eventi da un div all'altro.

L'ho pulito e trasformato in un plugin jQuery.

Ecco il repository Github: https://github.com/BaronVonSmeaton/jquery.forwardevents

Sfortunatamente, lo scopo per cui lo stavo usando - sovrapporre una maschera su Google Maps non ha catturato eventi di clic e trascinamento, e il cursore del mouse non cambia, il che degrada l'esperienza dell'utente abbastanza che ho appena deciso di nascondere la maschera in IE e Opera - i due browser che non supportano gli eventi puntatore.

Se conosci gli elementi che richiedono eventi del mouse e se la tua sovrapposizione è trasparente, puoi semplicemente impostare il loro indice z su qualcosa di più alto della sovrapposizione. Tutti gli eventi dovrebbero ovviamente funzionare in quel caso su tutti i browser.