JavaScript - Touchscreen

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)
https://www.mediaevent.de/javascript/touch-events.html

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

Klick oder Touch

http://jsfiddle.net/lisatinglu/zvoj2zsb/

var pointerPosition = function(e){
      var out = {x:0, y:0};
      if(e.type == 'touchstart' || e.type == 'touchmove' || e.type == 'touchend' || e.type == 'touchcancel'){
        var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
        out.x = touch.pageX;
        out.y = touch.pageY;
      } else if (e.type == 'mousedown' || e.type == 'mouseup' || e.type == 'mousemove' || e.type == 'mouseover'|| e.type=='mouseout' || e.type=='mouseenter' || e.type=='mouseleave') {
        out.x = e.pageX;
        out.y = e.pageY;
      }
      return out;
    };

$(document).on("mousedown touchstart",function( event ) {
	console.log(pointerPosition(event));
   // alert(pointerPosition(event).x+'-'+pointerPosition(event).y);
});

Beispiel 2

function mouseOrTouch(e){
	if(e.type === 'touchstart'){
		clearTimeout(alertcanceltimer);
		alertcancel = true;
		alertcanceltimer = setTimeout(function(){alertcancel = false;}, 600);
	}
	if(!alertcancel){
		alert('wtf');
	}
}

Hover Klasse bei Touch deaktivieren

$(document).ready(function() {
    $('.hover').bind('touchstart touchend', function(e) {
        e.preventDefault();
        $(this).toggleClass('hover_effect');
    });
});