JavaScript associa gli eventi touch agli eventi del mouse

Sto usando il cursore 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.

Sono sicuro che questo è quello che vuoi:

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 touch e poi ho triggersto manualmente i miei eventi del mouse per abbinarli. 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.

Aggiornare:

Nel postare questo, ho notato che chiamare preventDefault su tutti gli eventi touch impedirà il corretto funzionamento dei collegamenti. Il motivo principale per cui chiamare preventDefault è di impedire al telefono di scorrere, e lo si può fare richiamandolo 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 distriggersre il callout: -webkit-touch-callout .

Sulla falsariga della risposta di @Mickey Shine, Touch Punch fornisce la mapping degli eventi touch per fare clic sugli eventi. È costruito per mettere questo supporto nell’interfaccia utente di jQuery, ma il codice è informativo.

Per i futuri utenti, chi torna qui può utilizzare il seguente codice:

 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 usi come segue:

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

Alla fine ho trovato un modo per farlo funzionare usando la soluzione di Mickey, 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 vedi ‘ filter_div ‘ è l’area del grafico in cui abbiamo il filtro dell’intervallo del grafico e solo in quell’area vogliamo riscrivere i nostri controlli tattili!

Grazie Topolino. E ‘stata una grande soluzione.

Per fare in modo che il codice di @ Mickey funzioni 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 touch predefinito per edge e IE. Ma se lo aggiungi all’elemento sbagliato, distriggers anche lo scorrimento (che avviene di default sul bordo e IE sui dispositivi touch).