JavaScript eventos de toque mapeo a eventos de ratón

Question

Estoy usando el control deslizante YUI que opera con eventos de movimiento del ratón. Quiero hacer que responder a eventos TouchMove (iPhone y Android). ¿Cómo puedo producir un desplazamiento del ratón cuando se produce un evento touchmove? Estoy esperando que simplemente añadiendo una secuencia de comandos en la parte superior que los eventos TouchMove conseguirán asignada a los eventos de movimiento del ratón y no voy a tener que cambiar nada con el deslizador.

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. A pesar de que el código no es particularmente de uso general como es, debería ser trivial para adaptarse a la mayoría de las bibliotecas existentes de arrastrar y soltar, y el código de evento de ratón probablemente la mayoría existente. Esperemos que esta idea será muy útil para personas que desarrollan aplicaciones web para el 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 principal razón para llamar a preventDefault todo es que el teléfono no se desplacen, y se puede hacer eso llamándolo sólo en la devolución de llamada touchmove. La única desventaja de hacerlo de esta manera es que el iPhone veces mostrará su emergente ciernen sobre el origen de arrastre. Si descubro una forma de evitar eso, voy a actualizar este post.

Segundo informe de actualización:

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

Answer 2

En la línea de la respuesta de Shine @Mickey, táctil ponche proporciona una distribución de eventos de toque para hacer clic en eventos. Está construido para poner esto en apoyo jQuery UI, pero el código es informativo.

Answer 3

Para los futuros usuarios, quienes reaparición aquí se podría utilizar el siguiente código:

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 4

Finalmente encontré una manera de conseguir este trabajo utilizando la solución de Mickey, pero en lugar de su función init. Utilice 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 usted ve 'filter_div' es el área de la gráfica donde tenemos el filtro alcance de la carta y sólo en esa zona queremos reescribir nuestros controles táctiles!

Gracias Mickey. Fue una gran solución.

Answer 5

Para hacer el trabajo @ código de Mickey en el borde e Internet Explorer, añada las siguientes líneas en Css del elemento en el que desea la simulación suceda:

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

Estas líneas impiden el contacto predeterminado para el borde y el IE. Pero si lo añade al elemento equivocado, entonces también desactiva de desplazamiento (que pasa de forma predeterminada en el borde y el IE en dispositivos táctiles).