Javascript diferenciar eventos táctiles y ratón

Si en nuestra webapp queremos diferenciar los controles de entrada dependiendo si el dispositivo soporta eventos táctiles o no, es decir si se ejecuta en móvil cargamos eventos tap "dedo" y en entornos desktop eventos click "ratón"

Ejemplo usando libreria zepto.js y el módulo touch.js

if ("ontouchstart" in document.documentElement){
 //eventos táctiles touch
 $("body").on("tap", function(e) {
  e.preventDefault();
  alert('tap');
 });
 $("body").on("swipe", function(e) {
 e.preventDefault();
  alert('swipe');
 });

}else {
 //eventos click mouse
 $('#button1').on('click',function(e) { alert('click button1')});
 $('#button2').on('click',function(e) { alert('click button2'});
}

Se debe cargar el módulo touch.js de zepto para usar eventos táctiles.

Categories: desarrollo, javascript, Recurso