suit: Tablets und :focus bei [tabindex=0]

Beitrag lesen

Weißt du da gerade ein Beispiel?

Apple nennt bestimmte Events "Conditional" - sprich sie treten nur auf, wenn bestimmte Faktoren zutreffen. Wenn du z.B. mit einem Finger auf den Screen tippst und herumziehst, wird das click-Event nicht ausgeführt, weil zuerst mal touchstart und touchmove kommen.

Ein einfaches Beispiel ist eine Drop-Down-Navigation - ein li-Element mit einem a-Element und einem ul-Element drin

<ul>  
  <li>  
     <a href="http://example.com">foo</a>  
     <ul>  
        <li>bar</li>  
     </ul>  
  </li>  
<ul>
li ul { display: none; }  
li:hover ul { display: block; }

Beim ersten antippen wird das ul-Element auf Block gesetzt, beim zweiten tippen wird erst der Link verfolgt.

Wenn du jetzt das a-Element gegen ein span-Element ersetzt, kannst du machen was du willst, das :hover wird nun ignoriert, weil das Event nicht an das li-Element weitergereicht wird - außer du gibst dem span-Element ein cursor: pointer. Aber auch das scheitert ab und zu - hängt wohl von der iOS/Safari-Version ab

Oder noch besser eine Seite wo die aufgelistet wären?

Die Apple-Doku ist ziemlich dünn:
http://developer.apple.com/library/ios/#DOCUMENTATION/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html

Aber in der jQuery-Doku ist das als Randnotiz erwähnt:

http://api.jquery.com/live/

On mobile iOS (iPhone, iPad and iPod Touch) the click event does not bubble to the document body for most elements [...]

  1. Use natively clickable elements such as a or button, [...]

  2. Apply the CSS style cursor:pointer to the element that needs to bubble clicks [...]

Falls die pointer-Lösung nicht funktioniert, gibts nur noch JavaScript als Lösung:
http://blog.0100.tv/2010/05/fixing-the-hover-event-on-the-ipadiphoneipod/

Wie das im Kontext von :focus aussieht, kann ich dir aber nicht beantworten.