Przekazuj zdarzenia myszy przez element absolutnie umieszczony

Próbuję uchwycić zdarzenia myszy na elemencie z innym absolutnie pozycjonowanym elementem na nim.

W tej chwili zdarzenia na absolutnie pozycjonowanym elemencie uderzają w niego i podskakują do jego rodzica, ale chcę, aby był „przezroczysty” dla tych zdarzeń myszy i przekazywał je temu, co za nim stoi. Jak mam to zaimplementować?

pointer-events: none;

Jest właściwością CSS, która powoduje, że zdarzenia „przechodzą” przez element, do którego są stosowane, i sprawia, że ​​zdarzenie występuje w elemencie „poniżej”.

Zobacz szczegóły: https://developer.mozilla.org/en/css/pointer-events

Nie jest obsługiwany do IE 11; wszyscy inni dostawcy obsługują go od dłuższego czasu (globalne wsparcie wyniosło ~ 92% w 12 / '16): http://caniuse.com/#feat=pointer-events (dzięki @ s4y za udostępnienie linku w komentarzach) .

Jeśli wszystko, czego potrzebujesz, to wycofanie się, możesz być w stanie zadowolić się tą document.elementFromPointmetodą przez:

1. usunięcie górnej warstwy przy mousedown,
2. przekazanie współrzędnych xi yze zdarzenia do document.elementFromPointmetody, aby uzyskać element pod spodem, a następnie
3. przywracanie górnej warstwy.

Również miło wiedzieć ...
Zdarzenia wskaźnika mogą być wyłączone dla elementu nadrzędnego (prawdopodobnie przezroczystej div), a jednak włączone dla elementów potomnych. Jest to przydatne, jeśli pracujesz z wieloma nakładającymi się warstwami div, w których chcesz móc klikać elementy potomne dowolnej warstwy. W tym celu wszystkie divy rodzicielskie otrzymują, pointer-events: nonea dzieci-kliknięcia otrzymują zdarzenia-wskaźnik ponownie włączone przezpointer-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>

Powodem, dla którego nie otrzymujesz zdarzenia, jest to, że element pozycjonowany absolutnie nie jest dzieckiem elementu, który chcesz „kliknąć” (niebieski div). Najczystszym sposobem, jaki mogę wymyślić, jest umieszczenie absolutnego elementu jako dziecka tego, który chcesz kliknąć, ale zakładam, że nie możesz tego zrobić, bo nie opublikowałbyś tego pytania tutaj :)

Inną opcją byłoby zarejestrowanie modułu obsługi zdarzenia kliknięcia dla elementu absolutnego i wywołanie modułu obsługi kliknięcia dla niebieskiego elementu div, powodując, że oba będą migać.

Ze względu na sposób, w jaki wydarzenia pojawiają się w DOM, nie jestem pewien, czy istnieje dla ciebie prostsza odpowiedź, ale jestem bardzo ciekawy, czy ktoś ma jakieś sztuczki, o których nie wiem!

Dostępna jest wersja javascript, która ręcznie przekierowuje zdarzenia z jednego div na inny.

Wyczyściłem go i przekształciłem w wtyczkę jQuery.

Oto repozytorium Github: https://github.com/BaronVonSmeaton/jquery.forwardevents

Niestety cel, w którym go użyłem - nałożenie maski na Mapy Google nie uchwyciło zdarzeń kliknięcia i przeciągnięcia, a kursor myszy się nie zmienia, co obniża wrażenia użytkownika na tyle, że postanowiłem ukryć maskę pod IE i Operą - dwie przeglądarki, które nie obsługują zdarzeń wskaźnika.

Jeśli znasz elementy wymagające zdarzeń myszy, a twoja nakładka jest przezroczysta, możesz po prostu ustawić ich indeks Z na wartość wyższą niż nakładka. Wszystkie zdarzenia powinny oczywiście działać w tym przypadku we wszystkich przeglądarkach.