Übergeben Sie Mausereignisse durch ein absolut positioniertes Element

Ich versuche, Mausereignisse auf einem Element mit einem anderen absolut positionierten Element darüber zu erfassen.

Im Moment treffen Ereignisse auf dem absolut positionierten Element es und sprudeln zu seinem übergeordneten Element, aber ich möchte, dass es für diese Mausereignisse "transparent" ist und sie an das weiterleitet, was sich dahinter befindet. Wie soll ich das umsetzen?

pointer-events: none;

Ist eine CSS-Eigenschaft, mit der Ereignisse das Element "durchlaufen", auf das sie angewendet werden, und das Ereignis für das Element "unten" auftritt.

Weitere Informationen finden Sie unter: https://developer.mozilla.org/en/css/pointer-events

Es wird bis IE 11 nicht unterstützt. Alle anderen Anbieter unterstützen es seit geraumer Zeit (der weltweite Support betrug 12/16 ~ 92%): http://caniuse.com/#feat=pointer-events (danke an @ s4y für die Bereitstellung des Links in den Kommentaren) .

Wenn Sie nur die Maus herunterfahren müssen, können Sie möglicherweise mit der document.elementFromPointMethode auskommen , indem Sie:

1. Entfernen der obersten Schicht beim Mousedown,
2. Übergeben der xund y-Koordinaten vom Ereignis an die document.elementFromPointMethode, um das Element darunter abzurufen, und dann
3. Wiederherstellen der obersten Schicht.

Auch schön zu wissen ...
Zeigerereignisse können für ein übergeordnetes Element (wahrscheinlich transparentes div) deaktiviert und dennoch für untergeordnete Elemente aktiviert werden. Dies ist hilfreich, wenn Sie mit mehreren überlappenden Div-Ebenen arbeiten und auf die untergeordneten Elemente einer Ebene klicken möchten. Dafür erhalten alle Eltern-Divs pointer-events: noneund Click-Children Zeiger-Ereignisse, die von wieder aktiviert werdenpointer-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>

Der Grund, warum Sie das Ereignis nicht erhalten, ist, dass das absolut positionierte Element kein untergeordnetes Element des Elements ist, auf das Sie "klicken" möchten (blaues Div). Der sauberste Weg, den ich mir vorstellen kann, besteht darin, das absolute Element als Kind desjenigen anzugeben, auf das Sie klicken möchten, aber ich gehe davon aus, dass Sie das nicht können, oder Sie hätten diese Frage hier nicht gestellt :)

Eine andere Möglichkeit wäre, einen Klickereignishandler für das absolute Element zu registrieren und den Klickhandler für das blaue Div aufzurufen, wodurch beide blinken.

Aufgrund der Art und Weise, wie Ereignisse durch das DOM sprudeln, bin ich mir nicht sicher, ob es eine einfachere Antwort für Sie gibt, aber ich bin sehr neugierig, ob jemand andere Tricks hat, von denen ich nichts weiß!

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

Ich habe es aufgeräumt und daraus ein jQuery-Plugin gemacht.

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

Leider hat der Zweck, für den ich es verwendet habe - das Überlagern einer Maske über Google Maps - keine Klick- und Ziehereignisse erfasst, und der Mauszeiger ändert sich nicht, was die Benutzererfahrung so stark beeinträchtigt, dass ich mich gerade entschlossen habe, die Maske unter IE und Opera auszublenden. Die beiden Browser, die keine Zeigerereignisse unterstützen.

Wenn Sie die Elemente kennen, für die Mausereignisse erforderlich sind, und wenn Ihre Überlagerung transparent ist, können Sie den Z-Index einfach auf einen höheren Wert als die Überlagerung festlegen. Alle Ereignisse sollten in diesem Fall natürlich in allen Browsern funktionieren.