Gli eventi touch di mappatura JavaScript per gli eventi del mouse

Question

Sto utilizzando il dispositivo di scorrimento YUI che funziona con gli eventi di spostamento del mouse. Voglio farlo rispondere agli eventi touchmove (iPhone e Android). Come posso produrre un evento di spostamento del mouse quando si verifica un evento touchmove? Spero che aggiungendo qualche script in cima al fatto che gli eventi touchmove vengano mappati agli eventi di spostamento del mouse e che non cambierò nulla con il cursore.

Answer 1

Sono sicuro che questo è ciò che si vuole:

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

ho catturato gli eventi di tocco e poi licenziato manualmente i miei eventi del mouse da abbinare. Sebbene il codice non sia particolarmente generico così com'è, dovrebbe essere banale adattarsi alla maggior parte delle librerie drag and drop esistenti e probabilmente alla maggior parte del codice di eventi del mouse esistente. Speriamo che questa idea possa essere utile alle persone che sviluppano applicazioni web per l'iPhone.

Aggiornamento:

In questo distacco, ho notato che chiamando preventDefault su tutti gli eventi touch impedisce i collegamenti di funzionare correttamente. La ragione principale per chiamare lo preventDefault è di impedire lo scorrimento del telefono, e lo si può fare chiamando solo sul callback touchmove. L'unico svantaggio di farlo in questo modo è che l'iPhone a volte mostra il suo passaggio del mouse sopra l'origine di trascinamento. Se scopro un modo per impedirlo, aggiornerò questo post.

secondo aggiornamento:

ho trovato la proprietà CSS per spegnere la didascalia: -webkit-touch-callout.

Answer 2

Lungo le linee della risposta di @Mickey Shine, Touch Punch fornisce la mappatura degli eventi di tocco per fare clic sugli eventi. È costruito per mettere questo supporto nell'interfaccia utente jQuery, ma the code è informativo.

Answer 3

ho finalmente trovato un modo per ottenere questo lavoro utilizzando la soluzione di Topolino, ma invece della sua funzione init. Usa la funzione init qui.

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

Se si vede 'filter_div' è l'area del grafico dove abbiamo il filtro gamma grafico e solo in quella zona vogliamo riscrivere i nostri controlli touch!

Grazie Mickey. E 'stata una grande soluzione.

Answer 4

Per gli utenti futuri, che rimonta qui il seguente codice potrebbe essere utilizzato:

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

E poi negli eventi usano come segue:

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

Answer 5

Per rendere @ work codice di Topolino su Edge e internet explorer, aggiungi le seguenti righe in .css dell'elemento in cui vuoi che si verifichi la simulazione:

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

Queste linee impediscono il tocco predefinito per edge e IE. Ma se lo aggiungi all'elemento sbagliato, disattiva anche lo scorrimento (che avviene di default sul bordo e IE sui dispositivi touch).