Mappage JavaScript d'événements tactiles à des événements de souris

Question

J'utilise le curseur YUI qui fonctionne avec les événements de déplacement de la souris. Je veux le faire répondre aux événements touchmove (iPhone et Android). Comment puis-je produire un événement de déplacement de souris lorsqu'un événement touchmove se produit? J'espère qu'en ajoutant simplement un script en haut de la page, les événements touchmove seront mis en correspondance avec les événements de déplacement de la souris et que je n'aurai rien à changer avec le curseur.

Answer 1

Je suis sûr que c'est ce que vous voulez:

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

J'ai capturé les événements tactiles et puis manuellement tiré mes propres événements de la souris pour correspondre. Bien que le code n'est pas particulièrement à usage général comme il est, il doit être facile de s'adapter à la plupart des systèmes de glisser et déposer des bibliothèques, et probablement la plupart des souris code d'événement. J'espère que cette idée sera pratique pour les personnes qui développent des applications web pour l'iPhone.

Mise à jour:

Dans cette annonce, j'ai remarqué que l'appelant preventDefault sur tous les événements tactiles permettra d'éviter les liens de fonctionner correctement. La principale raison d'appeler à l' preventDefault à tous est d'empêcher le téléphone de défilement, et vous pouvez le faire en appelant uniquement sur l' touchmove de rappel. Le seul inconvénient de cette façon de faire est que l'iPhone s'affichent parfois ses hover popup sur l'origine du glissement. Si je trouve un moyen de l'en empêcher, je vais mettre à jour ce post.

Deuxième Mise À Jour:

J'ai trouvé la propriété CSS pour désactiver la légende: -webkit-touch-callout.

Answer 2

Dans la lignée de la réponse de @Mickey Shine, Touch Punch permet de mapper les événements tactiles aux événements de clic. Il est conçu pour intégrer cette prise en charge dans l'interface utilisateur jQuery, mais le code est informatif.