2013-01-21 30 views
10

W przeszłości, kiedy wykrywanie, czy urządzenie obsługuje dotykowe zdarzeń w JavaScript, moglibyśmy zrobić coś takiego:Jak wykryć obsługę dotykową urządzenia w JavaScript?

var touch_capable = ('ontouchstart' in document.documentElement); 

Jednak Google Chrome (17.x.x +) zwraca true dla powyższego czeku, nawet jeśli podstawowe urządzenie nie obsługuje zdarzeń dotykowych. Na przykład, działa powyższy kod na Windows 7 zwraca true, a więc jeśli połączymy go z czymś takim:

var start_evt = (touch_capable) ? 'ontouchstart' : 'onmousedown'; 

Na Google Chrome, zdarzenie nigdy nie jest zwolniony od mamy wiązanie z ontouchstart. Krótko mówiąc, czy ktoś zna wiarygodny sposób na obejście tego? Jestem aktualnie uruchomione następujące sprawdzenia:

var touch_capable = ('ontouchstart' in document.documentElement && navigator.userAgent.toLowerCase().indexOf('chrome') == -1) 

to daleko od ideału ...

Odpowiedz

9

poprawną odpowiedzią jest do obsługi zarówno typy zdarzeń - nie są one wzajemnie się wykluczają.

Dla bardziej wiarygodnego testu wsparcia dotykowym, również szukać window.DocumentTouch && document instanceof DocumentTouch który jest jednym z testów stosowanych przez Modernizr

Jeszcze lepiej, wystarczy użyć modernizr siebie i mają to zrobić wykrywanie funkcji dla Ciebie.

Pamiętaj jednak, że nie możesz zapobiec fałszywym pozytywom, stąd mój pierwszy wiersz powyżej - masz otrzymałeś, aby wesprzeć oba.

+0

Poprawnie - natomiast mam (i miłość) tablet PC, czasami mam mysz i nie boję się go używać. –

+0

Dziękuję. Tak naprawdę jest to wtyczka jQuery, a ja raczej nie dodaję wstępnego warunku Modernizr. Jednak z jakiegoś powodu 'window.DocumentTouch && documentof DocumentTouch' zwraca' undefined' ... – BenM

+0

@BenM wiesz, że możliwe jest zbudowanie niestandardowego pobierania Modernizr, który będzie zawierał tylko te testy, których potrzebujesz? – Alnitak

1

Powinieneś rozważyć użycie testu dotykowego Modernizr (i testowanego w wielu przeglądarkach).

z ich strony:

// bind to mouse events in any case 

if (Modernizr.touch){ 
    // bind to touchstart, touchmove, etc and watch `event.streamId` 
} 

http://modernizr.github.com/Modernizr/touch.html

+6

prawidłowe nastroje, zła odpowiedź. Modernizr może testować "fałszywie pozytywny" dla wsparcia dotykowego, więc zawsze powinieneś zawsze obsługiwać zdarzenia myszy. – Alnitak

+0

Poza tym nie należy siłą_ __ używać użytkownika do używania ekranu dotykowego (zamiast myszy, którą trzyma). –

+0

Tak, zawsze powinien obejmować obsługę myszy i obsługę dotykową, jeśli urządzenie obsługuje. Muszę poprawić swoją odpowiedź. – techfoobar

0

Dobrze starego pytanie, ale mając to zrobić bez biblioteki, stworzyłem następujące rozwiązanie - po prostu pozwolić im mówić zdarzenia samodzielnego - Gdy zobaczysz zdarzenia touch, po prostu wyłącz przetwarzanie zdarzeń mouse.

W coffescript wyglądałby tak;

  hasTouch = false 
      mouseIsDown = false 
      @divs.on "touchstart", (e)-> 
       hasTouch = true 
       touchstart(e.timeStamp,e.originalEvent.touches[0].pageX); 
       return true 
      @divs.on "mousedown", (e)-> 
       mouseIsDown = true; 
       touchstart(e.timeStamp,e.clientX) if not hasTouch 
       return true 

      @divs.on 'touchmove', (e) -> 
       touchmove(e.timeStamp,e.originalEvent.touches[0].pageX); 
       return true; 
      @divs.on 'mousemove', (e) -> 
       touchmove(e.timeStamp,e.clientX) if mouseIsDown and not hasTouch 
       return true; 

      @divs.on 'touchend', (e) -> 
       touchend(); 
       return true 
      @divs.on 'mouseup', (e) -> 
       mouseIsDown = false; 
       touchend() if not hasTouch 
       return true 

Sprawiedliwy definiują funkcje touchstart, move i end zawierającym rzeczywistą logiki ....

5

ta jest modyfikacją sposobu modernizr dokonuje wykrywania dotyku, z dodaną obsługą pracować dotykać urządzeń IE10 +.

var isTouchCapable = 'ontouchstart' in window || 
window.DocumentTouch && document instanceof window.DocumentTouch || 
navigator.maxTouchPoints > 0 || 
window.navigator.msMaxTouchPoints > 0; 

To nie jest niezawodne, ponieważ detecting a touch device is apparently an impossibility.

Twój przebieg mogą się różnić:

  • starszych urządzeń z ekranem dotykowym emulować tylko zdarzenia myszy
  • niektórych przeglądarkach & OS konfiguracje mogą umożliwić dotykowych interfejsów API, gdy nie ma ekran dotykowy jest podłączony
  • w hybrydowym mysim/touch/trackpad/pióro/klawiatura, to nie wskazuje, które wejście jest używane, tylko że przeglądarka jest drażliwa - tylko wykrywa, czy przeglądarka może akceptuj lub emuluj wejście dotykowe. Na przykład użytkownik może w każdej chwili przełączyć się z używania myszy na dotykanie ekranu na laptopie z ekranem dotykowym lub podłączonym do myszy.

Aktualizacja: wskazówka: Nie używaj wykrywanie dotykowy możliwość kontrolowania & określić zachowania UI, use event listeners instead. Projektowanie zdarzenia click/touch/keyup, a nie urządzenia, wykrywanie zdolności dotykowej jest zwykle używane do zapisania kosztów procesora/pamięci związanych z dodawaniem detektora zdarzeń. Jednym z przykładów, gdzie detekcja dotykowy może być pożyteczne i właściwe:

if (isTouchCapable) { 
    document.addEventListener('touchstart', myTouchFunction, false); 
} 
+0

Pracuj dla mnie, dzięki! –

+1

Nie ma za co! – Benson

Powiązane problemy