Czy przeglądarki na komputery obsługują zdarzenia dotykowe?

Question

Próbuję przyspieszyć działanie HTML5 poprzez prototypowanie wyjątkowo prostej aplikacji do rysowania za pomocą <canvas> i dotknięcie zdarzeń, takich jak ontouchstart i ontouchmove.

To działa poprawnie i wyświetla się w emulatorze Androida, gdzie za pomocą kliknięć myszy symuluję zdarzenia dotykowe. Jednak nie działa w ogóle podczas uruchamiania w mojej przeglądarce na komputerze (Safari 5.1.1, Firefox 7 w systemie Windows).

Myślałem, że zdarzenia kliknięcia myszą będą interpretowane jako zdarzenia dotykowe, takie jak podczas działania w emulatorze.

Zastanawiam się teraz, czy być może przeglądarki desktopowe nie obsługują zdarzeń dotykowych.

Answer 1

Firefox 6 i wyżej obsługują zdarzenia dotykowe. Zobacz tabelę kompatybilności here.

MDN article on Touch Events

EDIT: Czy badania z ekranem dotykowym lub myszą? Zdarzenia myszy nie są automatycznie tłumaczone na zdarzenia dotykowe. Aby dowiedzieć się, jak symulować zdarzenia dotykowe za pomocą myszy, zobacz artykuł this post.

Answer 2

ontouchstart będzie dodatkiem do wersji internetowej webkita dla javascript. możesz to przetestować, ale tylko na emulatorze.

Answer 3

W rzeczywistości jest odwrotnie. Przeglądarki mobilne tłumaczą wydarzenia dotykowe myszy, aby uzyskać wsparcie ze strony starszych użytkowników. Jeśli musi działać zarówno na urządzeniach przenośnych, jak i na komputerach stacjonarnych, a Ty naprawdę nie potrzebujesz zdarzeń dotykowych, możesz zamiast tego użyć zdarzeń myszy. W przeciwnym razie należy powiązać zdarzenia związane z dotykiem i myszką, a zdarzenie dotykowe anuluje zdarzenie myszy. W ten sposób na urządzeniach mobilnych dotyk odpala, a my nie. Na pulpicie dotyk nie uruchamia się, a myszka.

Dla pilau, oto prosty przykład anulowania zdarzenia kliknięcia na urządzeniach mobilnych. Proszę zauważyć, że pytanie dotyczy raczej rysunku, który wymagałby przeciągania kliknięć, co wymagałoby nieco więcej kodu do wykrywania, ale podstawowa idea jest taka sama, powiązać zdarzenia, które należy obsłużyć. Wtedy e.preventdefault() spowoduje zatrzymanie przez przeglądarki mobilne emulacji zdarzeń typu kliknięcia.

$('#element').on('touchend click', function(e){ 

    // Do your onclick action now 

    // cancel the onclick firing 
    e.preventDefault(); 
});