Mausereignisse durch absolut positioniertes Element weiterleiten

Question

Ich versuche, Mausereignisse auf einem Element mit einem anderen absolut positioniert Element auf es zu erfassen.

Im Moment, Ereignisse auf die absolut positioniert Element treffen es und Blase bis zu seiner übergeordneten, aber ich möchte es "transparent" zu sein, um diese Maus-Ereignisse und leiten sie auf was auch immer hinter ihm ist. Wie sollte ich dies implementieren?

Answer 1

pointer-events: none;

Ist eine CSS-Eigenschaft, die bewirkt, dass Ereignisse das HTML-Element, auf das die Eigenschaft angewendet wird, "durchlaufen". Sie bewirkt, dass das Ereignis auf dem Element "darunter" eintritt.

Siehe Einzelheiten: https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events

Es wird von fast allen Browsern unterstützt, einschließlich IE11; die weltweite Unterstützung lag bei 98,2 % in 05/'21): http://caniuse.com/#feat=pointer-events (Dank an @s4y für die Bereitstellung des Links in den Kommentaren).

Answer 2

Auch gut zu wissen...
Zeiger-Ereignisse können für ein übergeordnetes Element (wahrscheinlich ein transparentes div) deaktiviert und für untergeordnete Elemente dennoch aktiviert werden. Dies ist hilfreich, wenn Sie mit mehreren sich überlappenden div-Ebenen arbeiten und die untergeordneten Elemente jeder Ebene anklicken möchten. Hierfür erhalten alle übergeordneten Divs pointer-events: none und Klick-Kinder erhalten Zeiger-Ereignisse, die wieder aktiviert werden durch 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>

Answer 3

Wenn Sie nur den Mousedown benötigen, können Sie sich mit dem document.elementFromPoint Methode, durch:

1. Entfernen der obersten Schicht bei Mousedown,
2. Überschreiten der x y y Koordinaten vom Ereignis zum document.elementFromPoint Methode, um das Element darunter zu erhalten, und dann
3. die Wiederherstellung der obersten Schicht.

Answer 4

Der Grund, warum Sie das Ereignis nicht erhalten, ist, dass das absolut positionierte Element kein untergeordnetes Element des Elements ist, das Sie "anklicken" möchten (blaues Div). Der sauberste Weg, den ich mir vorstellen kann, ist, das absolute Element als Kind des Elements zu setzen, das Sie angeklickt haben möchten, aber ich nehme an, dass Sie das nicht tun können, sonst hätten Sie diese Frage hier nicht gestellt :)

Eine andere Möglichkeit wäre, einen Click-Event-Handler für das absolute Element zu registrieren und den Click-Handler für das blaue Div aufzurufen, so dass beide blinken.

Aufgrund der Art und Weise Ereignisse sprudeln durch die DOM Ich bin nicht sicher, es ist eine einfachere Antwort für Sie, aber ich bin sehr neugierig, wenn jemand anderes hat alle Tricks, die ich nicht kenne!

Answer 5

Es ist eine Javascript-Version verfügbar, die Ereignisse manuell von einem Div zu einem anderen umleitet.

Ich habe es aufgeräumt und zu einem jQuery-Plugin gemacht.

Hier ist das Github-Repository: https://github.com/BaronVonSmeaton/jquery.forwardevents

Leider hat der Zweck, den ich damit verfolgte - das Überlagern einer Maske über Google Maps - keine Klick- und Zieh-Ereignisse erfasst, und der Mauszeiger ändert sich nicht, was das Benutzererlebnis so sehr beeinträchtigt, dass ich beschlossen habe, die Maske unter IE und Opera auszublenden - den beiden Browsern, die keine Zeigerereignisse unterstützen.