Lewati acara mouse melalui elemen yang benar-benar diposisikan

Saya mencoba menangkap peristiwa mouse pada suatu elemen dengan elemen lain yang benar-benar diposisikan di atasnya.

Saat ini, peristiwa pada elemen yang benar-benar diposisikan memukul dan melambung ke induknya, tapi saya ingin itu menjadi "transparan" untuk peristiwa mouse ini dan meneruskannya ke apa pun yang ada di belakangnya. Bagaimana saya harus menerapkan ini?

pointer-events: none;

Adalah properti CSS yang membuat acara "melewati" elemen yang diterapkan dan membuat acara terjadi pada elemen "di bawah".

Lihat detailnya: https://developer.mozilla.org/en/css/pointer-events

Tidak didukung hingga IE 11; semua vendor lain mendukungnya sejak beberapa waktu (dukungan global ~ 92% pada 12 / '16): http://caniuse.com/#feat=pointer-events (terima kasih kepada @ s4y karena menyediakan tautan dalam komentar) .

Jika semua yang Anda butuhkan adalah mousedown, Anda mungkin dapat puas dengan document.elementFromPointmetode ini, dengan:

1. menghapus lapisan atas pada mousedown,
2. melewati xdan ykoordinat dari acara ke document.elementFromPointmetode untuk mendapatkan elemen di bawahnya, dan kemudian
3. mengembalikan lapisan atas.

Juga menyenangkan untuk diketahui ...
Pointer-events dapat dinonaktifkan untuk elemen induk (mungkin transparan div) dan belum diaktifkan untuk elemen anak. Ini berguna jika Anda bekerja dengan beberapa lapisan div yang tumpang tindih, tempat Anda ingin dapat mengeklik elemen turunan dari lapisan apa pun. Untuk ini, semua parenting div dapatkan pointer-events: nonedan klik-anak-anak mendapatkan pointer-events diaktifkan kembali olehpointer-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>

Alasan Anda tidak menerima acara adalah karena elemen yang diposisikan benar-benar bukan anak dari elemen yang ingin Anda "klik" (blue div). Cara terbersih yang dapat saya pikirkan adalah dengan meletakkan elemen absolut sebagai anak dari yang Anda ingin klik, tapi saya berasumsi Anda tidak dapat melakukan itu atau Anda tidak akan mengirim pertanyaan ini di sini :)

Pilihan lain adalah mendaftarkan pengendali event klik untuk elemen absolut dan memanggil pengendali klik untuk div biru, menyebabkan keduanya flash.

Karena cara acara muncul melalui DOM, saya tidak yakin ada jawaban yang lebih sederhana untuk Anda, tetapi saya sangat ingin tahu apakah ada orang lain yang memiliki trik yang tidak saya ketahui!

Ada versi javascript yang tersedia yang secara manual mengalihkan acara dari satu div ke yang lain.

Saya membersihkannya dan membuatnya menjadi plugin jQuery.

Inilah repositori Github: https://github.com/BaronVonSmeaton/jquery.forwardevents

Sayangnya, tujuan saya menggunakannya untuk - overlay topeng di Google Maps tidak menangkap peristiwa klik dan seret, dan kursor mouse tidak berubah yang menurunkan pengalaman pengguna yang cukup sehingga saya memutuskan untuk menyembunyikan topeng di bawah IE dan Opera - dua browser yang tidak mendukung acara pointer.

Jika Anda tahu elemen-elemen yang membutuhkan peristiwa mouse, dan jika overlay Anda transparan, Anda bisa mengatur z-index dari mereka ke sesuatu yang lebih tinggi daripada overlay. Semua acara tentunya harus bekerja dalam kasus itu di semua browser.