Mapowanie zdarzeń dotykowych JavaScript na zdarzenia myszy

Question

Używam suwaka YUI, który obsługuje zdarzenia przenoszenia myszy. Chcę, aby reagował na zdarzenia touchmove (iPhone i Android). Jak mogę utworzyć zdarzenie przenoszenia myszy po wystąpieniu zdarzenia touchmove? Mam nadzieję, że po dodaniu jakiegoś skryptu na szczycie zdarzenia touchmove zostaną zmapowane na ruchy myszy i nie będę musiał nic zmieniać za pomocą suwaka.

Answer 1

Jestem pewien, że to, co chcesz:

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

mam zrobione w dotyku zdarzenia, a następnie ręcznie opalane własne zdarzenia myszy, aby dopasować. Chociaż kod nie jest szczególnie uniwersalny, jak jest, powinno być trywialnie dostosować się do większości istniejących bibliotek drag and drop i prawdopodobnie do większości istniejących kodów zdarzeń myszy. Mam nadzieję, że ten pomysł przyda się ludziom rozwijającym aplikacje internetowe na iPhone'a.

Aktualizacja:

umieszczanie to zauważyłem, że nazywając preventDefault na temat wszystkich zdarzeń dotykowych uniemożliwi linki działają poprawnie. Głównym powodem, aby zadzwonić pod numer preventDefault, jest zatrzymanie przewijania telefonu i możesz to zrobić, dzwoniąc tylko na oddzwanianie touchmove. Jedyną wadą robienia tego w ten sposób jest to, że iPhone czasami wyświetla wyskakujące okienko po przeciągu. Jeśli odkryję sposób, aby temu zapobiec, zaktualizuję ten wpis.

Druga aktualizacja:

Znalazłem właściwości CSS, aby wyłączyć objaśnienie: -webkit-touch-callout.

Answer 2

Wraz z odpowiedzią @ Mickey Shine, Touch Punch udostępnia mapowanie zdarzeń dotykowych dla zdarzeń kliknięcia. Jest zbudowany tak, aby umieścić tę obsługę w interfejsie jQuery, ale the code ma charakter informacyjny.

Answer 3

W końcu znalazłem sposób, żeby to działało przy użyciu rozwiązania Mickeya, ale zamiast jego funkcji init. Użyj tutaj funkcji init.

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

Jeśli widzisz „filter_div” jest obszar wykresu gdzie mamy filtr zakres wykresu i tylko w tym zakresie chcemy przerobić nasze przyciski dotykowe!

Dziękuję Mickey. To było świetne rozwiązanie.

Answer 4

Dla przyszłych użytkowników, którzy tu następujący kod może być użyty comeback:

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

a następnie w imprezach używać jak następuje:

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

Answer 5

Do wykonywania @ pracy kodu Mickeya na krawędzi i Internet Explorer, dodaj następujące wiersze do pliku .css elementu, w którym chcesz przeprowadzić symulację:

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

Te linie uniemożliwiają domyślne dotknięcie krawędzi i IE. Ale jeśli dodasz go do niewłaściwego elementu, to również wyłącza przewijanie (co dzieje się domyślnie na krawędzi i IE na urządzeniach dotykowych).