iPad / iPhone und das jQuery .click event

iPad (und wohl auch iPhone) haben eine fiese Besonderheit im Event-Triggering gegenüber Android Devices und Mac / PC. Sie triggern KEIN 'click'-Event auf (bestimmten - dazu später mehr) Elementen!
Das ist gemein, da beispielsweise responsive Websites, welche diese Events nutzen, zwar auf allen anderen Geräten funktionieren, aber nicht auf den oben genannten. Hier muss man also noch einmal besonders aufpassen!

Dieses Verhalten gefällt mir zwar gar nicht, lässt sich aber auch nicht ändern und man kann natürlich auch hier über Sinn und Unsinn diskutieren.

Nun aber zum Problem und dessen Lösung:
Ursprung des Problems war ein klickbarer div-Container wie der folgende, für den uns einer unserer Tester meldete, dass ein Klick auf seinem iPad nicht auslöst:

<article class="clicktest" style="height:300px; width:300px; background-color: red; border: 2px #000 solid;">This div has NO cursor:pointer; CSS and should NOT work on ipad/iphone! On other devices it will work.</div>

Zuerst dachten wir an Fehler im JavaScript-Code oder Event-Überlagerungen, bis wir schließlich einige Quellen zum Thema fanden, die ähnliches berichteten. Die bekannteste ist wohl die von Dan Wellman: http://www.danwellman.co.uk/fixing-jquery-click-events-for-the-ipad/

Er schlägt, wie auch andere Quellen, bspw.:

• http://digitalize.ca/2010/02/jqtouch-tap-vs-click/
• http://frontend.pro/javascript/jquery-click-event-iphone-ipad
• http://stackoverflow.com/questions/7818461/jquery-click-handler-not-called-on-ipad

vor, dass man das "touchstart"-Event zusätzlich zu "click" registriert. Das ist allerdings problematisch, da dies auch beim Scrolling getriggert werden kann und auch einige Android und Desktop-Browser nicht gut darauf reagieren. Gleiches gilt lt. unseren Tests übrigens auch für "touchend"!
Zudem wird die Code-Komplexität weiter gesteigert und die Code-Qualität sinkt damit. Es wäre also allerhöchstens sinnvoll, einen eigenen Handler als Abstraktion zu entwickeln oder (besser) auf Mobile Event Bibliotheken wie Hammer.js oder das jQuery Mobile Events Plugin zu setzen. Trotzdem hatte ich damit Bauchschmerzen, da nun schon die nächste Library im Spiel wäre. Das muss dich auch einfacher gehen!

Schließlich stießen wir auf Hinweise zu einem anderen Ansatz, der mir weitaus sauberer erscheint und sogar zu besserer Usability zwingt: Die Verwendung der "cursor: pointer" CSS-Eigenschaft.
http://www.mitch-solutions.com/blog/17-ipad-jquery-live-click-events-not-working

Diese hatten wir nämlich im Rahmen der Entwicklung auf dem betreffenden Element noch nicht gesetzt!
Also schreiben wir einen Test... klappt es?

Probiert es selbst aus:

<script type="text/javascript">
jQuery(document).ready(function(){
$('.clicktest').click(function(){
alert('This clicktest works on my device!');
});
});
</script>

<article class="clicktest" style="cursor:pointer; height:300px; width:300px; background-color: green; border: 2px #000 solid;">This article has cursor:pointer; CSS and should work. It also works on other devices.</div>