Cuando estamos desarrollando interfaces web adaptables a dispositivos móviles, principalmente táctiles, tenemos que tener en cuenta que no disponemos de un ratón. Con lo cual, a priori, no nos es posible interactuar con eventos del estilo onMouseMove, ouMouseOver, etc.
Por suerte para los desarrolladores, disponemos de la opción de capturar las acciones del touch en estos dispositivos gracias a los eventos, onTouchStart, onTouchMove y onTouchEnd.
Estos eventos es posible manejarlos en toda la página o solo sobre elementos puntuales, para emular un drag and drop, por ejemplo.
<script>
// Para toda la página sería algo asi
document.onmousemove = function(e){
console.log(e.pageX + "," + e.pageY);
}
// Para un elemento en concreto
document.getElementById('nodo').onmousestart = function(e){
console.log('seleccionado elemento en ' + e.pageX + "," + e.pageY)
}
</script>
La acción por defecto en estos casos del touch es hacer scroll en el navegador, tanto vertical como horizontal, en caso de ser posible. Si se desea es posible evitar esta acción por defecto ejecutando lo siguiente:
<script>
document.getElementById('node').onmousemove = function(e){
//evitando accion por defecto
e.preventDefault();
//resto de acciones
...
}
</script>
Para todos los eventos relacionados con el touch tenemos disponibles la siguiente lista de atributos:
- touches -> Lista con la información sobre todos los dedos que están tocando la pantalla.
- targetTouches -> Similar a touches, pero filtrando los dedos que empiezan en el mismo nodo.
- changedTouches -> Contendra la información sobre los dedos que causaron la última acción.
Veamos algunos ejemplos del funcionamiento de las listas, para entender mejor su utilidad:
- Cuando ponemos un solo dedo sobre la pantalla. Las tres listas contendrán la misma información. La relativa a dicho dedo.
- Cuando ponemos un segundo dedo sobre la pantalla. touches tendrá dos elementos, uno para cada dedo. Mientras que targetTouches solo contendrá dos elementos si el segundo dedo se posiciona sobre el mismo nodo que el primero y changedTouches solo contendrá información sobre el segundo dedo.
- Si ponemos dos dedos exactamente al mismo tiempo es posible que tengamos dos elementos en changedTouches.
- Si movemos los dedos por la pantalla, la única lista que registrara cambios será changedTouches. La que tendrá información sobre tantos dedos como se estén moviendo, por lo menos uno.
- Cuando levantamos un dedo, su información es eliminada de touches y de targetTouches, pero aparecerá en changedTouches, dado que es la responsable del evento.
- Cuando retiramos el último dedo, touches y targetTouches se vacian, mientras que changedTouches aun mantiene la información del último dedo.
Por otro lado la información recogida sobre un dedo es la siguiente:
- clientX: coordenada X del touch relativa al viewport. (excluye el offset del scroll)
- clientY: coordenada Y del touch relativa al viewport. (excluye el offset del scroll)
- pageX: coordenada X relativa a la página. (incluye scroll)
- pageY: coordenada Y relativa a la página (incluye scrool)
- screenX: coordenada X relativa a la pantalla.
- screenY: coordenada Y relativa a la pantalla.
- target: Nodo sobre el que se origino el evento.
- identifier: Identificador numérico, único para cada evento.
Para terminar, veamos un ejemplo sencillo de drag and drop con un solo dedo, para un elemento con id nodo.
<script>
node = document.getElementById('nodo');
node.ontouchmove = function(e){
if(e.touches.length == 1){ // Only deal with one finger
var touch = e.touches[0]; // Get the information for finger #1
var node = touch.target; // Find the node the drag started from
node.style.position = "absolute";
node.style.left = touch.pageX + "px";
node.style.top = touch.pageY + "px";
}
}
</script>
touches
Entradas Relacionadas:
- HTML5: Adobe abandona el desarrollo de Flash para dispositivos móviles
- JQuery: eventos con el ratón