Fare olaylarını kesinlikle konumlandırılmış öğeden geçirme

Üstünde kesinlikle konumlandırılmış başka bir öğe bulunan bir öğe üzerinde fare olayları yakalamaya çalışıyorum.

Şu anda, kesinlikle konumlandırılmış öğedeki olaylar ona çarptı ve ebeveynine doğru patladı, ancak bu fare olaylarına "şeffaf" olmasını ve onları arkasında ne varsa iletmesini istiyorum. Bunu nasıl uygulamalıyım?

pointer-events: none;

Olayların uygulandığı öğeden "geçmesini" sağlayan ve olayın "aşağıdaki" öğesinde gerçekleşmesini sağlayan bir CSS özelliğidir.

Ayrıntılar için bakınız: https://developer.mozilla.org/en/css/pointer-events

IE 11'e kadar desteklenmez; diğer tüm satıcılar oldukça uzun bir süredir destekliyorlar (küresel destek 12 / ' 16'da ~% 92 idi): http://caniuse.com/#feat=pointer-events (yorumlarda bağlantıyı sağladığı için @ s4y sayesinde) .

İhtiyacınız olan tek şey fareyle aşağıdaysa, yöntemle şunları yapabilirsiniz document.elementFromPoint:

1. fareyle üzerine gelindiğinde üst tabakanın çıkarılması,
2. öğeyi altına almak için xve ykoordinatlarını olaydan document.elementFromPointyönteme geçirme ve ardından
3. üst katmanı geri yükleme.

Ayrıca bilmek güzel ...
İşaretçi olayları bir üst öğe (muhtemelen saydam div) için devre dışı bırakılabilir ve yine de alt öğeler için etkinleştirilebilir. Herhangi bir katmanın alt öğelerini tıklatabileceğiniz birden çok çakışan div katmanıyla çalışıyorsanız bu yardımcı olur. Bunun için tüm ebeveynlik div'leri get pointer-events: noneve click-children,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>

Etkinliği almamanızın nedeni, kesinlikle konumlandırılmış öğenin "tıklatmak" istediğiniz öğenin alt öğesi olmamasıdır (mavi div). Düşünebileceğim en temiz yol, mutlak öğeyi tıklamak istediğiniz öğenin alt öğesi olarak koymaktır, ancak bunu yapamayacağınızı veya bu soruyu buraya göndermeyeceğinizi varsayıyorum :)

Başka bir seçenek, mutlak öğe için bir tıklama olay işleyicisi kaydetmek ve her ikisinin de yanıp sönmesine neden olan mavi div için tıklama işleyicisini çağırmak olacaktır.

Olayların DOM'da patlaması nedeniyle sizin için daha basit bir cevap olduğundan emin değilim, ancak başka birinin bilmediğim hileleri olup olmadığını merak ediyorum!

Etkinlikleri bir div'den diğerine manuel olarak yönlendiren bir javascript sürümü vardır.

Temizledim ve bir jQuery eklentisi haline getirdim.

İşte Github deposu: https://github.com/BaronVonSmeaton/jquery.forwardevents

Ne yazık ki, onu kullandığım amaç - Google Haritalar'ın üzerine bir maske yerleştirmek tıklama ve sürükleme olaylarını yakalamadı ve fare imleci, IE ve Opera altında maskeyi gizlemeye karar verdiğim kullanıcı deneyimini yeterince düşüren - işaretçi olaylarını desteklemeyen iki tarayıcı.

Fare olaylarına ihtiyaç duyan öğeleri biliyorsanız ve kaplamanız şeffafsa, bunların z-dizinini kaplamadan daha yüksek bir şeye ayarlayabilirsiniz. Tüm olaylar elbette bu durumda tüm tarayıcılarda çalışmalıdır.