JavaScript mapping eventos táctiles a eventos de mouse

Question

Estoy usando el control deslizante YUI que funciona con eventos de movimiento del mouse. Quiero que responda a los eventos de movimiento (iPhone y Android). ¿Cómo puedo producir un evento de movimiento de mouse cuando ocurre un evento de movimiento? Espero que con solo agregar un script en la parte superior, los eventos de touchmove se correlacionen con los eventos de movimiento del mouse y no tenga que cambiar nada con el control deslizante.

Answer 1

estoy seguro de que esto es lo que quiere:

function touchHandler(event) 
{ 
    var touches = event.changedTouches, 
     first = touches[0], 
     type = ""; 
    switch(event.type) 
    { 
     case "touchstart": type = "mousedown"; break; 
     case "touchmove": type = "mousemove"; break;   
     case "touchend": type = "mouseup"; break; 
     default:   return; 
    } 

    // initMouseEvent(type, canBubble, cancelable, view, clickCount, 
    //    screenX, screenY, clientX, clientY, ctrlKey, 
    //    altKey, shiftKey, metaKey, button, relatedTarget); 

    var simulatedEvent = document.createEvent("MouseEvent"); 
    simulatedEvent.initMouseEvent(type, true, true, window, 1, 
            first.screenX, first.screenY, 
            first.clientX, first.clientY, false, 
            false, false, false, 0/*left*/, null); 

    first.target.dispatchEvent(simulatedEvent); 
    event.preventDefault(); 
} 

function init() 
{ 
    document.addEventListener("touchstart", touchHandler, true); 
    document.addEventListener("touchmove", touchHandler, true); 
    document.addEventListener("touchend", touchHandler, true); 
    document.addEventListener("touchcancel", touchHandler, true);  
} 

haya capturado a los eventos de toque y luego despedido manualmente mis propios eventos de ratón a juego. Aunque el código no es especialmente de propósito general, debe ser trivial para adaptarse a la mayoría de las bibliotecas existentes de arrastrar y soltar, y probablemente a la mayoría de los códigos existentes de eventos de mouse. Espero que esta idea sea útil para las personas que desarrollan aplicaciones web para iPhone.

Actualización:

En esta publicación, he notado que llamar preventDefault en todos los eventos de toque evitará que los enlaces funcionen correctamente. La razón principal para llamar al preventDefault es detener el desplazamiento del teléfono, y puede hacerlo llamándolo solo en la devolución de llamada touchmove. El único inconveniente de hacerlo de esta manera es que el iPhone a veces mostrará su ventana emergente sobre el origen del arrastre. Si descubro una forma de evitar eso, actualizaré esta publicación.

Segundo informe de actualización:

que he encontrado la propiedad CSS para desactivar la llamada: -webkit-touch-callout.

Answer 2

En la línea de la respuesta de @Mickey Shine, Touch Punch proporciona la asignación de eventos táctiles para hacer clic en eventos. Está diseñado para poner este soporte en jQuery UI, pero the code es informativo.

Answer 3

Finalmente encontré la manera de hacer que funcione con la solución de Mickey pero en lugar de su función init. Usa la función init aquí.

function init() { 
    document.getElementById('filter_div').addEventListener("touchstart", touchHandler, true); 
    document.getElementById('filter_div').addEventListener("touchmove", touchHandler, true); 
    document.getElementById('filter_div').addEventListener("touchend", touchHandler, true); 
    document.getElementById('filter_div').addEventListener("touchcancel", touchHandler, true); 
} 

Si ve 'filter_div' es el área de la gráfica donde tenemos el filtro alcance de la carta y sólo en esa zona es lo que queremos reescribir nuestros controles táctiles!

Gracias Mickey. Fue una gran solución.

Answer 4

para los futuros usuarios, que regreso aquí el siguiente código podría utilizarse:

var eventMap = {}; 

(function(){ 
var eventReplacement = { 
    "mousedown": ["touchstart mousedown", "mousedown"], 
    "mouseup": ["touchend mouseup", "mouseup"], 
    "click": ["touchstart click", "click"], 
    "mousemove": ["touchmove mousemove", "mousemove"] 
}; 


for (i in eventReplacement) { 
    if (typeof window["on" + eventReplacement[i][0]] == "object") { 
     eventMap[i] = eventReplacement[i][0]; 
    } 
    else { 
     eventMap[i] = eventReplacement[i][1]; 
    }; 
}; 
})(); 

Y luego, en los eventos utilizan como siguiente:

$(".yourDiv").on(eventMap.mouseup, function(event) { 
     //your code 
} 

Answer 5

Para hacer @ work código de Mickey en el borde y Internet Explorer, agregue las siguientes líneas en .css del elemento donde desea que ocurra la simulación:

.areaWhereSimulationHappens { 
    overflow: hidden; 
    touch-action: none; 
    -ms-touch-action: none; 
} 

Estas líneas evitan el toque predeterminado para edge e IE. Pero si lo agrega al elemento incorrecto, también deshabilita el desplazamiento (que ocurre de manera predeterminada en el borde y IE en dispositivos táctiles).