Button span selektieren funktioniert nicht im Firefox

[Rolf B]

Hallo ebody,

zur Zeit nicht. Wenn man die zugehörigen Meldungen im Bugzilla von Firefox anschaut, diskutieren die Helden dort schon seit 5 Jahre darüber ob dieses Verhalten Spec-konform ist oder nicht.

Es ist einfach Fakt, dass Firefox keine Events in das DOM innerhalb eines Button hineinlässt. Ein Button ist ein Button, und das innere HTML dient allein der Darstellung, kann aber auf nichts reagieren.

Das gilt für :hover, und auch für einen click auf den Button. Wenn Du dieses Html hast:

<button>
   <span>Foo</span>
</button>

liefert Dir Chrome beim Klick auf Foo den span als event.target, und Firefox liefert den button. Man KANN das als sinnvoll erachten. Das aktive Element ist der Button, nicht der span, darum soll auch der Button das Event-Target sein. In Chrome musst Du erstmal vom span aus nach oben tigern bis Du den Button findest - und wenn Du mit Eventdelegation arbeiten willst dann tigerst Du im Zweifelsfall bis ganz nach oben, bis Du merkst dass Du nichts zu delegieren hat.

Deswegen sind bei Mozilla einige dagegen, das Verhalten zu ändern, wenn ich das richtig verstanden habe.

Und Du bist angeschmiert mit deinem Hover-Span.

Man kann sich sicherlich Lösungen überlegen, wie man den Span nicht als Kind des Button, sondern als Geschwisterknoten einbaut, und ihn dann mit position:absolute über den Button schwenkt. Und mit ein paar Pfund JavaScript bekommt man vielleicht auch noch das Verhalten so hin, dass ein Klick auf den Span wie ein Klick auf den Button wirkt. Aber: LASS DAS. Es wird dann immer Fälle geben, gerade im Bereich der Zugänglichkeit, wo es doch nicht funktioniert.

Ist denn das Aufleuchten des Icons im Button so wichtig? Als Kind eines interaktiven Elements kann das Icon sowieso nicht selbst interaktiv sein, warum möchtest Du Interaktivität vorspiegeln?

Rolf