logo-antoiba

Antonio Ibáñez Programming

Touch Events para móviles y tablets con JavaScript y jQuery

jQuery JavaScript Web Móviles

Los desarrolladores web muchas veces programamos en JavaScript no tenemos en cuenta que el código puede no responder en pantallas táctiles y estas suelen ser tan importantes como el ordenador. Un desarrollador web tiene que tener en cuenta todas las posibilidades, por ello, cuando me dieron la tarea de hacer adaptativo un mapa comprobé que también tenía en cuenta este tipo de pantallas. Mi sorpresa fue que no las tenía y contaba con los eventos de ratón. Además, en muchas ocasiones las pantallas táctiles pueden hacer más intuitiva la experiencia con el usuario.

Para conseguir adaptarlo era muy importante hacer una tarea de investigación porque realmente, sabía bastante poco sobre ellos, siempre me han enseñado los eventos de ratón y teclado, pero nada sobre pantallas táctiles.

Encontré que los típicos eventos como mousedown, mousemove y mouseup si están totalmente integrados entre si en los navegadores con un pequeño cambio para que se adapten a pantallas táctiles. Para ello hay que utilizar los eventos touch, y que en el siguiente enlace podemos ver que si están integrados. Se puede usar jQuery para integrar este tipo de eventos, lo que hace más fácil el escribir el código pensando en ellos.

Para tener integrados los eventos para ordenador y dispositivos táctiles se pueden hacer una función bastante útil y que al indagar he creado. Declaramos las variables al principio con los string que necesitamos.



var move_event = 'mousemove';
var up_event = 'mouseup';
var down_event = 'mousedown';

Para hacer que los eventos se cambien para dispositivos táctiles es tan fácil como comprobar la propiedad "ontouchstart" in window.



if ("ontouchstart" in window) {
move_event = 'touchmove';
up_event = 'touchend';
down_event = 'touchstart';
}

Este tipo de eventos si está integrado y es fácil de usar. Pero también hay que tener en cuenta otra cuestión, si se quiere conocer la posición del puntero del ratón, en ordenador se utiliza la propiedad "e.screenX" y "e.screenY" para tener la posición X e Y del puntero.

En móvil se utilizaría "e.targetTouches[0].pageX" y "e.targetTouches[0].pageY". Por ello para comprobar esta eventualidad debemos de comprobarlo al recibir el valor.



rxStart = "ontouchstart" in window ? e.targetTouches[0].pageX : e.screenX;
ryStart = "ontouchstart" in window ? e.targetTouches[0].pageY : e.screenY;

Pero esto solo sirve para touchstart y touchmove. Para touchend se debe de utilizar "e.changedTouches[0].pageX" y "e.changedTouches[0].pageY".

Aquí podéis ver el código de ejemplo.

Crear una página para todas las plataformas

Si se quiere programar una web donde no haya problemas con tu audiencia, deberás de crearla para todos los dispositivos posibles. Ahora te voy a decir como con la información anterior.



var move_event = 'mousemove';
var up_event = 'mouseup';
var down_event = 'mousedown';
var clicked = false;

$(function() {
if ("ontouchstart" in window) {
move_event = 'touchmove';
up_event = 'touchend';
down_event = 'touchstart';
}
touchyDown();
touchyUp();
touchyMove();
});

function touchyDown() {
$("#touchy").on(down_event, function(e) {
e.preventDefault();
var rxStart = "ontouchstart" in window ? e.targetTouches[0].pageX : e.screenX;
var ryStart = "ontouchstart" in window ? e.targetTouches[0].pageY : e.screenY;
clicked = true;
});
}

function touchyMove() {
$("#touchy").on(move_event, function(e) {
e.preventDefault();
if (clicked) {
var rxStart = "ontouchstart" in window ? e.targetTouches[0].pageX : e.screenX;
var ryStart = "ontouchstart" in window ? e.targetTouches[0].pageY : e.screenY;
}
});
}

function touchyUp() {
$("#touchy").on(up_event, function(e) {
e.preventDefault();
var rxStart = "ontouchstart" in window ? e.changedTouches[0].pageX : e.screenX;
var ryStart = "ontouchstart" in window ? e.changedTouches[0].pageY : e.screenY;
clicked = false;
});
}

Programar en base a este tipo de eventos es algo bastante fácil porque los navegadores lo tienen todos unificado, el problema viene para programar otros eventos de Zoom mas y Zoom menos que se llaman en inglés "Pinch Events" y que utilizan dos dedos en pantalla separándolos o acercándolos para que la pantalla se amplie o se reduzca. O diversos tipos de efecto que se tienen asumidos por muchos pero que realmente, son digámoslo finamente, un dolor de muelas para los programadores. En el siguiente post de mi Blog veremos como programar los famosos Pinch Events o Eventos de Zoom.


Escribe un comentario

Anterior Pinch Events o Eventos para hacer Zoom en móviles con jQuery

Está web utiliza cookies para asegurarse de una mejor experiencia de nuestra página webMás información sobre las cookies