JavaScript - Touchscreen: Unterschied zwischen den Versionen
Aus Wikizone
| Zeile 14: | Zeile 14: | ||
e.stopPropagation vs e.preventDefault | e.stopPropagation vs e.preventDefault | ||
| + | == Bist du ein Touch Device ? == | ||
| + | <pre> | ||
| + | function is_touch_device() { | ||
| + | return 'ontouchstart' in window // works on most browsers | ||
| + | || navigator.maxTouchPoints; // works on IE10/11 and Surface | ||
| + | }; | ||
| + | </pre> | ||
== Maus oder Touch ? == | == Maus oder Touch ? == | ||
Bei reinen Touchscreen Geräten kann man durch div. Methoden checken ob getouched wird und dann die Handler für die Maus einfach ignorieren. | Bei reinen Touchscreen Geräten kann man durch div. Methoden checken ob getouched wird und dann die Handler für die Maus einfach ignorieren. | ||
Version vom 6. Februar 2017, 11:53 Uhr
Touchscreens erfordern besonderen Umgang bei der Behandlung von Events. Vor allem wenn das Gerät sowohl Mauseingaben aber auch Toucheingaben handeln kann.
Links
http://blog.neofonie.de/css/css-hover-wie-der-hover-effekt-die-usability-auf-tablets-beeinflusst https://www.html5rocks.com/en/mobile/touchandmouse/ http://stackoverflow.com/questions/4817029/whats-the-best-way-to-detect-a-touch-screen-device-using-javascript (Modernizr Ansatz)
- hover Effekte
Eventbubbling
Klassen für detection mit Modernizr
e.stopPropagation vs e.preventDefault
Bist du ein Touch Device ?
function is_touch_device() {
return 'ontouchstart' in window // works on most browsers
|| navigator.maxTouchPoints; // works on IE10/11 and Surface
};
Maus oder Touch ?
Bei reinen Touchscreen Geräten kann man durch div. Methoden checken ob getouched wird und dann die Handler für die Maus einfach ignorieren.
Wenn sowohl Maus als auch Touch Ereignisse zu erwarten sind (Touchscreen PCs z.B.) Muß man seine Skripte so auslegen das beides korrekt gehandelt wird.
Event Reihenfolge
touchstart touchmove touchend mouseover mousemove mousedown mouseup click
