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
gab! Ich kann die akzeptierte Antwort irgendwann auf diese umstellen.pointer-events
Still ist nicht besonders gut , aber es wird besser. Eine kompatiblere Option finden Sie in der Antwort von @ JedSchmidt.Wenn Sie nur die Maus herunterfahren müssen, können Sie möglicherweise mit der
document.elementFromPoint
Methode auskommen , indem Sie:x
undy
-Koordinaten vom Ereignis an diedocument.elementFromPoint
Methode, um das Element darunter abzurufen, und dannquelle
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: none
und Click-Children Zeiger-Ereignisse, die von wieder aktiviert werdenpointer-events: all
quelle
pointer-events:none
und der bevorstehenden Enttäuschung, dass Kinderknoten betroffen sind, retten Sie den Tag :).parent * { pointer-events:all; }
für Kinder?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ß!
quelle
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.
quelle
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.
quelle