2013-06-12 13 views
17

Ok, ich bin ziemlich neu in der Web-Entwicklung für mobile/Tablet-Plattformen. Ich bin jedoch ziemlich zuversichtlich, wenn ich für eine Browserumgebung entwickle.jquery Click Event für Tablets und Touchscreen-Handys

Mein Problem ist, dass ich kein Tablet besitze (ich bin arm, also muss blind fliegen), so ist es schwer für mich zu testen. Ich bin auch ziemlich besorgt darüber, dass die Klickereignisse nicht richtig funktionieren.

Wie kann ich sicherstellen, dass Click und Mousedown jquery Ereignisse auf Tablets/Smartphones korrekt funktionieren?

Besteht ein Konsens über Best Practices für Klickereignisse und Tablets/Smartphones?

Hinweis: Ich entwickle keine mobile Website - die Website verwandelt Form für mobile.

+4

Sie könnten dies verwenden: '$ (Element) .on ('touchstart click', Funktion() {...});'. – Joe

+0

Emulatoren der Hilfe? http://www.webdesignerdepot.com/2012/11/6-free-mobile-device-emulators-for-testing-your-site/ – WeaklyTyped

+0

@Joe Ich habe das gleiche Problem onclick funktioniert nicht auf Tablet, wenn Verwendung .on und etwas drucken, dann funktioniert es.alert ich versuchte, mit cosole.log zu ersetzen, aber das onclick funktioniert nicht mit dem – anam

Antwort

20

Mobile Browser reagieren immer noch auf Klickereignisse, verursachen jedoch eine Verzögerung (normalerweise etwa 300 ms). Wenn Sie eine reaktionsfähigere Erfahrung wünschen, können Sie versuchen, festzustellen, ob Sie sich auf einer mobilen Plattform befinden, und entweder touchstart oder touchend Ereignisse verwenden. Ich finde touchend ist in der Regel eine bessere Erfahrung, vor allem weil die Hand des Benutzers immer noch in der Art ist, wenn touchstart feuert.

Etwas wie folgt aus:

$(element).on(isMobile ? 'touchend' : 'click', function(e) {...});

Oder Sie können hammer.js verwenden, die sowohl für Desktop- und mobile funktionieren wird.

Zum Testen können Sie die Antworten zu dieser Stackoverflow-Frage durchlesen: Simulating touch events on a PC browser.