javascript - eventos - onmouseover html ejemplo

JavaScript mapear eventos táctiles a eventos de mouse

Question

Estoy usando el control deslizante YUI que funciona con los 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

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

Answer 2

Estoy seguro de que esto es lo que quieres:

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);    
}

Capturé los eventos táctiles y luego disparé mis propios eventos del mouse para que coincidan. 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.

Actualizar:

Al publicar esto, noté que llamar preventDefault en todos los eventos táctiles evitará que los enlaces funcionen correctamente. La razón principal para invocar preventDefault en absoluto es evitar que el teléfono se desplace, y puede hacerlo llamándolo solo en la touchmove 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.

Segunda actualización:

He encontrado la propiedad de CSS para desactivar el texto -webkit-touch-callout : -webkit-touch-callout .

Answer 3

Finalmente encontré una forma de hacer que esto funcione usando 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 del gráfico donde tenemos el filtro de rango de gráficos y solo en esa área queremos reescribir nuestros controles táctiles.

Gracias Mickey. Fue una gran solución.

Answer 4

Para futuros usuarios, quienes regresen aquí, se puede usar 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 usa lo siguiente:

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

Answer 5

Para hacer que el código de @ Mickey funcione en Edge e 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).