JavaScript mapující události dotyku na události myši

Používám posuvník YUI, který pracuje s událostmi pohybu myši. Chci, aby odpovídal touchmove události (iPhone a Android). Jak mohu vytvořit událost pohybu myši, když je touchmove dojde k události? Doufám, že jen přidáním nějakého skriptu na začátek touchmove události budou namapovány na události pohybu myši a nebudu muset nic měnit pomocí posuvníku.

Odpověď

Jsem si jistý, že toto je to, co chcete:

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

Zachytil jsem události dotyku a poté ručně spustil své vlastní události myši, aby odpovídaly. Přestože kód není příliš obecný, měl by být triviální, aby se přizpůsobil většině existujících knihoven drag and drop a pravděpodobně většině existujících kódů událostí myši. Doufejme, že tato myšlenka přijde vhod lidem vyvíjejícím webové aplikace pro iPhone.

Aktualizace:

Při psaní tohoto příspěvku jsem si všiml, že volání preventDefault u všech dotykových událostí zabrání správnému fungování odkazů. Hlavním důvodem volání preventDefault vůbec je zastavit posouvání telefonu, a to můžete provést zavoláním pouze na touchmove zpětné volání. Jedinou nevýhodou tohoto postupu je to, že iPhone někdy zobrazí vyskakovací okno pro umístění kurzoru na počátek přetažení. Pokud objevím způsob, jak tomu zabránit, aktualizuji tento příspěvek.

Druhá aktualizace:

Našel jsem vlastnost CSS pro vypnutí popisku:-webkit-touch-callout .