Ich habe seit einiger Zeit einige Schaltflächen verwendet, die einen gedrückten Effekt haben, wenn sie mit relativer Position und einem top: 1px in der Pseudoklasse: active geklickt werden .Wenn ein mousedown- und mouseup-Ereignis nicht gleich einem Klick ist
Ich hatte Probleme mit Klickereignissen, die nicht feuern, und es stellte sich heraus, dass dies darauf zurückzuführen war, dass die Ereignisse mousedown und mouseup nicht auf dasselbe Element feuern. Ich habe ein wenig herumgespielt, um sicherzustellen, dass das innerste Element den ganzen Knopf bedeckt und entdeckt, dass das Problem bestehen bleibt.
Wenn ich rechts oben auf den Text klicke, springt der Link nach unten (feuert das mousedown-Ereignis ab) und dann wieder hoch (feuert das mouseup-Ereignis ab), aber der Klick tritt nicht auf. Wenn ich gut in die Mitte des Textes klicke oder schön vom Text wegziehe, ist alles in Ordnung.
Das einzige, was ich hier denken kann, ist, dass das Mousedown-Ereignis auf den TextNode auslöst und das MouseUp auf das Ankerelement feuert, da sich der TextNode nicht mehr unter dem Cursor befindet. Das Erfassen der Ereignisobjekte und das Betrachten der Ziele mit Firebug zeigt an, dass dies nicht der Fall ist, aber ich kann mir wirklich keine andere Erklärung vorstellen. Wenn ich ein wenig herumlese, kann ich etwas über Ereignisse erfahren, die in textNodes in Safari ausgelöst werden, aber nichts über diese Diskrepanz.
Das folgende Snippet sollte es Ihnen ermöglichen, das Problem zu replizieren. Denken Sie daran, Sie müssen direkt am oberen Rand des Textes klicken, oder ein Pixel oder zwei oben, und dieses Problem tritt nur bei einer Reihe von Pixeln:
<style>
a.button-test {
display: inline-block;
padding: 20px;
background: red;
}
.button-test:active {
position: relative;
top: 1px;
}
</style>
<a class="button-test" href="#">Clickedy click</a>
Herumspielen mit der CSS, nicht inline-block verwenden, Steigende Linienhöhe statt Polsterung usw. scheint hier keine Wirkung zu haben. Ich habe viele Kombinationen ausprobiert. Die meisten meiner Tests wurden in Firefox durchgeführt, damit ich mich an die Ereignisse binden und aufzeichnen kann, was durch den Firebug passiert, aber dieses Problem tritt auch in anderen Browsern auf.
Hat jemand irgendeine Inspiration, die sie auf diesem anderen anbieten können, als den aktiven Sprung zu verlieren? Ich würde diesen Effekt gerne behalten, wenn ich kann.
Vielen Dank,
Dom (kein Wortspiel beabsichtigt)