Ich habe einen gewöhnlichen Link so gestaltet, dass er einer Schaltfläche in unserer auf Sencha Touch 2 basierenden mobilen Anwendung ähnelt, und ich habe Probleme mit den meisten Links, die in Safari auf dem iPhone nicht funktionieren.
Der Link ist ein gewöhnliches <a> -Tag mit einem inneren <span> -Element, das den Etikettentext enthält. Auf dem Element <a> ist ein Padding vorhanden, mit dem Taps registriert werden können. Es scheint, dass das innere <span> blockierende Taps daran hindert, als Link-Tap im übergeordneten Anker registriert zu werden, und sein Hintergrund ist transparent.
Hier ist das Markup:
%Vor%Das Testen in Chrome stellt keine Probleme dar, d. h. das Klicken auf den Bereich bewirkt, dass dem übergeordneten Hyperlink gefolgt wird. Beide sind Webkit-basierte Browser. Einer unserer Tester hat dies auch in Safari auf einem Macbook ohne Probleme getestet; Ich habe das auch in Chrome mit einem Wacom Bamboo Tablet ohne Probleme getestet. Dies ist nur ein Problem auf mobilen Geräten (getestet sowohl auf iPhone als auch auf Android 2.2). Darauf zielen wir ab.
Gibt es eine CSS-Eigenschaft, die ich für das Element <span> festlegen kann, um zuzulassen, dass Abgriffe auf den übergeordneten Hyperlink fallen? Im Idealfall möchte ich vermeiden, dass Ereignisse über JavaScript gesetzt werden müssen. Irgendwelche Ideen, warum das nicht so funktioniert, wie ich es erwarten würde?
Aktualisieren : Hier sind die Stile für den inneren Bereich, wie er in der Chrome-Entwicklerkonsole angezeigt wird:
%Vor%Vielen Dank.
Gelöst, dank diesem Beitrag die folgende CSS-Eigenschaft erwähnt:
%Vor% Diesem Style für den inneren <span> (und den inneren floated <img> , wie in meinem zweiten Kommentar erwähnt) hinzugefügt wurde, erlaubte diesen, den Tap an den übergeordneten Hyperlink weiterzuleiten.
Das Seltsame ist, dass Sencha Touch 2 das DOM zu stören schien, nicht sicher, was es speziell war. Einen ähnlich gestalteten Button auf einer komplett statischen HTML-Seite (kein JavaScript, geschweige denn Sencha Touch 2) zu verspotten zeigte das ursprüngliche Problem auf einem mobilen Gerät nicht.
Eine andere Option im einfachen Fall (single <span> , keine Floating-Bilder) bestand darin, die Stile zu refaktorieren, um die Notwendigkeit eines inneren <span> zu eliminieren, obwohl dies für den komplizierteren Fall nicht möglich war:
Ich denke, das hat mit der Verhinderung des Zoomens durch Sencha Touch zu tun. Sie haben Code hinzugefügt, um die meisten Touchstart-Ereignisse zu verhindern (wodurch die Verwendung des Links beendet wird). Es gibt eine Ausnahme für Anker, aber nicht für Kinder von Ankern (also das Anzapfen eines Ankers selbst funktioniert gut, aber nicht das Tippen auf eine Spanne innerhalb eines Ankers). Ich war in der Lage, einen Quickfix in meiner Anwendungsstartmethode zu packen:
%Vor%Der obige Code kommt ohne Garantien (habe nicht auf Android getestet und ich vermute, dass es ziemlich ineffizient ist). Ich habe dies auch als Fehler gemeldet: Ссылка
Tags und Links html css iphone safari sencha-touch-2