Ich benutze seit einiger Zeit einige Schaltflächen, die einen gedrückten Effekt haben, da sie mit der relativen Position und einem Top: 1px in der: active-Pseudoklasse angeklickt werden.

Ich hatte Probleme mit Klickereignissen, die nicht ausgelöst wurden, und es stellte sich heraus, dass Maus-Down- und Maus-Up-Ereignisse nicht für dasselbe Element ausgelöst wurden. Ich habe ein bisschen herumgespielt, um sicherzustellen, dass das innerste Element den gesamten Knopf abdeckt, und festgestellt, dass das Problem weiterhin besteht.

Wenn ich ganz oben auf den Text klicke, springt der Link nach unten (Auslösen des MouseDown-Ereignisses) und dann nach oben (Auslösen des MouseUp-Ereignisses), aber der Klick tritt nicht auf. Wenn ich schön in die Mitte des Textes klicke oder schön weg vom Text, ist alles in Ordnung.

Das einzige, woran ich hier denken kann, ist, dass das Maus-Down-Ereignis auf dem textNode ausgelöst wird und das mouseup auf dem anchor-Element ausgelöst wird, da sich der textNode nicht mehr unter dem Cursor befindet. Das Fangen der Ereignisobjekte und das Betrachten der Ziele mit Firebug zeigt, dass dies nicht der Fall ist, aber mir fällt wirklich keine andere Erklärung ein. Wenn ich ein bisschen herumlese, kann ich einige Ereignisse finden, die auf textNodes in Safari ausgelöst werden, aber nichts über dieses Missverhältnis.

Mit dem folgenden Snippet können Sie das Problem replizieren. Denken Sie daran, dass Sie oben rechts auf den Text oder ein oder zwei Pixel darüber klicken müssen. Dieses Problem tritt nur bei einer Pixelreihe auf:

<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>

Mit dem CSS herumspielen, keinen Inline-Block verwenden, die Zeilenhöhe erhöhen statt auffüllen usw. scheint hier keinen Effekt 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 eine Inspiration, die er dazu anbieten kann, als den aktiven Sprung zu verlieren? Ich würde diesen Effekt wirklich gerne beibehalten, wenn ich kann.

Vielen Dank,

Dom (kein Wortspiel beabsichtigt)