Wykrywanie urządzeń z ekranem dotykowym z Javascriptem

W Javascript / jQuery, jak mogę wykryć, czy urządzenie klienckie ma mysz?

Mam witrynę, która przesuwa się w górę małego panelu informacyjnego, gdy użytkownik umieści kursor myszy nad elementem. Używam jQuery.hoverIntent do wykrywania najechania, ale to oczywiście nie działa na urządzeniach z ekranem dotykowym, takich jak iPhone / iPad / Android. Więc na tych urządzeniach chciałbym wrócić do stuknięcia, aby wyświetlić panel informacyjny.

+1 za robienie hoveri clickjedno i drugie. Innym sposobem może być używanie zapytań o media CSS i używanie niektórych stylów tylko dla mniejszych ekranów / urządzeń mobilnych, które są najbardziej narażone na dotyk / dotknięcie. Więc jeśli masz określone style za pośrednictwem CSS i z jQuery sprawdzasz te elementy pod kątem właściwości stylu urządzenia mobilnego, możesz je podłączyć, aby napisać kod dostosowany do telefonu komórkowego.

Zobacz tutaj: http://www.forabeautifulweb.com/blog/about/hardboiled_css3_media_queries/

var isTouchDevice = 'ontouchstart' in document.documentElement;

Uwaga : fakt, że urządzenie obsługuje zdarzenia dotykowe, nie musi oznaczać, że jest to wyłącznie urządzenie z ekranem dotykowym. Wiele urządzeń (takich jak mój Asus Zenbook) obsługuje zarówno zdarzenia kliknięcia, jak i dotknięcia, nawet jeśli nie mają żadnych rzeczywistych mechanizmów wprowadzania dotykowego. Projektując obsługę dotykową, zawsze uwzględniaj obsługę zdarzenia kliknięcia i nigdy nie zakładaj, że jakiekolwiek urządzenie jest wyłącznie jednym lub drugim.

Znaleziono testy dla window.Touch nie działa na Androidzie, ale tak:

function is_touch_device() {
  return !!('ontouchstart' in window);
}

Zobacz artykuł: Jaki jest najlepszy sposób na wykrycie urządzenia z ekranem dotykowym za pomocą JavaScript?

return (('ontouchstart' in window)
      || (navigator.maxTouchPoints > 0)
      || (navigator.msMaxTouchPoints > 0));

Powód używania maxTouchPoints wraz z msMaxTouchPoints:

Firma Microsoft oświadczyła, że ​​począwszy od przeglądarki Internet Explorer 11, wersja tej właściwości z prefiksem dostawcy firmy Microsoft (msMaxTouchPoints) może zostać usunięta i zaleca zamiast niej używanie maxTouchPoints.

Źródło: http://ctrlq.org/code/19616-detect-touch-screen-javascript

if ("ontouchstart" in window || navigator.msMaxTouchPoints) {
    isTouch = true;
} else {
    isTouch = false;
}

Działa wszędzie !!

Używam:

if(jQuery.support.touch){
    alert('Touch enabled');
}

w jQuery mobile 1.0.1

Wygląda na to, że Google Chrome zwraca fałszywe alarmy w tym przypadku:

var isTouch = 'ontouchstart' in document.documentElement;

Przypuszczam, że ma to coś wspólnego z możliwością „emulacji zdarzeń dotykowych” (F12 -> ustawienia w prawym dolnym rogu -> zakładka „overrides” -> ostatnie pole wyboru). Wiem, że jest domyślnie wyłączony, ale z tym łączę zmianę w wynikach (metoda „in” używana do pracy w Chrome). Jednak wydaje się, że to działa, o ile przetestowałem:

var isTouch = !!("undefined" != typeof document.documentElement.ontouchstart);

Wszystkie przeglądarki, w których uruchomiłem ten kod w stanie typeof to "object", ale czuję się bardziej pewny, wiedząc, że to nie jest zdefiniowane :-)

Testowano na IE7, IE8, IE9, IE10, Chrome 23.0.1271.64, Chrome na iPada 21.0.1180.80 i iPadzie Safari. Byłoby fajnie, gdyby ktoś zrobił więcej testów i podzielił się wynikami.

Napisałem to dla jednej z moich witryn i prawdopodobnie jest to najbardziej niezawodne rozwiązanie. Zwłaszcza, że ​​nawet Modernizr może uzyskać fałszywe alarmy po wykryciu dotyku.

Jeśli używasz jQuery

$(window).one({
  mouseover : function(){
    Modernizr.touch = false; // Add this line if you have Modernizr
    $('html').removeClass('touch').addClass('mouse');
  } 
});

lub po prostu czysty JS ...

window.onmouseover = function(){ 
    window.onmouseover = null;
    document.getElementsByTagName("html")[0].className += " mouse";
}

Mój pierwszy post / komentarz: Wszyscy wiemy, że „touchstart” jest uruchamiany przed kliknięciem. Wiemy również, że gdy użytkownik otworzy Twoją stronę, będzie: 1) poruszał myszą 2) klikał 3) dotykał ekranu (przewijanie, lub ... :))

Spróbujmy czegoś:

// -> Start: jQuery

var hasTouchCapabilities = 'ontouchstart' in window && (navigator.maxTouchPoints || navigator.msMaxTouchPoints);
var isTouchDevice = hasTouchCapabilities ? 'maybe':'nope';

//attach a once called event handler to window

$(window).one('touchstart mousemove click',function(e){

    if ( isTouchDevice === 'maybe' && e.type === 'touchstart' )
        isTouchDevice = 'yes';
});

// <- End: jQuery

Miłego dnia!

Przetestowałem następujący kod wymieniony powyżej w dyskusji

 function is_touch_device() {
    return !!('ontouchstart' in window);
 }

działa na Androidzie Mozilla, Chrome, Opera, domyślnej przeglądarce Androida i Safari na iPhonie ... wszystko pozytywne ...

wydaje mi się solidne :)

Pomocny wpis na ten temat na blogu, do którego prowadzi łącze ze źródła Modernizr w celu wykrywania zdarzeń dotykowych. Wniosek: nie jest możliwe niezawodne wykrycie urządzeń z ekranem dotykowym z poziomu Javascript.

http://www.stucox.com/blog/you-cant-detect-a-touchscreen/

To działa dla mnie:

function isTouchDevice(){
    return true == ("ontouchstart" in window || window.DocumentTouch && document instanceof DocumentTouch);
}

Jeśli używasz Modernizr , jest bardzo łatwy w użyciu, Modernizr.touchjak wspomniano wcześniej.

Jednak wolę używać kombinacji Modernizr.touchtestów agenta użytkownika, aby być bezpiecznym.

var deviceAgent = navigator.userAgent.toLowerCase();

var isTouchDevice = Modernizr.touch || 
(deviceAgent.match(/(iphone|ipod|ipad)/) ||
deviceAgent.match(/(android)/)  || 
deviceAgent.match(/(iemobile)/) || 
deviceAgent.match(/iphone/i) || 
deviceAgent.match(/ipad/i) || 
deviceAgent.match(/ipod/i) || 
deviceAgent.match(/blackberry/i) || 
deviceAgent.match(/bada/i));

if (isTouchDevice) {
        //Do something touchy
    } else {
        //Can't touch this
    }

Jeśli nie używasz Modernizr, możesz po prostu zamienić Modernizr.touchpowyższą funkcję na('ontouchstart' in document.documentElement)

Pamiętaj również, że testowanie klienta użytkownika iemobilezapewni szerszy zakres wykrytych urządzeń mobilnych Microsoft niż Windows Phone.

Zobacz także to pytanie SO

W jQuery Mobile możesz po prostu:

$.support.touch

Nie wiem, dlaczego jest to tak nieudokumentowane… ale jest bezpieczne dla wielu przeglądarek (ostatnie 2 wersje obecnych przeglądarek).

Jak już wspomniano, urządzenie może obsługiwać zarówno mysz, jak i dotyk. Bardzo często pytanie nie brzmi „co jest obsługiwane”, ale „co jest aktualnie używane”.

W tym przypadku możesz po prostu zarejestrować zdarzenia myszy (w tym nasłuchiwanie po najechaniu kursorem) i podobnie zdarzenia dotknąć.

element.addEventListener('touchstart',onTouchStartCallback,false);

element.addEventListener('onmousedown',onMouseDownCallback,false);

...

JavaScript powinien automatycznie wywołać właściwy odbiornik na podstawie danych wprowadzonych przez użytkownika. Tak więc w przypadku zdarzenia dotykowegoonTouchStartCallback zostanie , emulując kod najechania.

Zwróć uwagę, że dotknięcie może odpalić oba rodzaje słuchaczy, dotyk i mysz. Jednak słuchacz dotyku przechodzi pierwszy i może uniemożliwić kolejnym słuchaczom myszy wywołanie event.preventDefault().

function onTouchStartCallback(ev) {
    // Call preventDefault() to prevent any further handling
    ev.preventDefault();
    your code...
}

Dalsze czytanie tutaj .

Do tworzenia iPada używam:

  if (window.Touch)
  {
    alert("touchy touchy");
  }
  else
  {
    alert("no touchy touchy");
  }

Mogę wtedy selektywnie łączyć się ze zdarzeniami dotykowymi (np. Ontouchstart) lub zdarzeniami opartymi na myszy (np. Onmousedown). Nie testowałem jeszcze na Androidzie.