Javascript ile dokunmatik ekranlı cihazları algılama

Javascript / jQuery'de, istemci cihazda bir fare olup olmadığını nasıl tespit edebilirim?

Kullanıcı faresini bir öğenin üzerine getirdiğinde küçük bir bilgi paneli yukarı kayan bir sitem var. Fareyle üzerine gelmeyi algılamak için jQuery.hoverIntent kullanıyorum, ancak bu açıkça iPhone / iPad / Android gibi dokunmatik ekranlı cihazlarda çalışmıyor. Bu yüzden bu cihazlarda bilgi panelini göstermek için dokunmaya geri dönmek istiyorum.

Yapmak hoverve clickher ikisi için +1 . Diğer bir yol, CSS medya sorgularını kullanmak ve bazı stilleri yalnızca daha küçük ekranlar / mobil cihazlar için kullanmak olabilir; bunlar, dokunma / dokunma işlevine sahip olma olasılığı en yüksek olanlardır. Dolayısıyla, CSS aracılığıyla belirli stilleriniz varsa ve jQuery'den bu öğeleri mobil cihaz stili özellikleri için kontrol ederseniz, mobil cihazlara özel kod yazmak için bunlara bağlanabilirsiniz.

Buraya bakın: http://www.forabeautifulweb.com/blog/about/hardboiled_css3_media_queries/

var isTouchDevice = 'ontouchstart' in document.documentElement;

Not : Bir cihazın dokunmatik olayları desteklemesi, yalnızca dokunmatik ekranlı bir cihaz olduğu anlamına gelmez. Pek çok cihaz (Asus Zenbook'um gibi), gerçek dokunma giriş mekanizmaları olmasa bile hem tıklama hem de dokunma olaylarını destekler. Dokunma desteği için tasarım yaparken, her zaman tıklama etkinliği desteğini dahil edin ve hiçbir cihazın yalnızca biri veya diğeri olduğunu varsaymayın.

Pencere için test bulundu.Touch, Android'de çalışmadı, ancak şu işe yarıyor:

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

Şu makaleye bakın: JavaScript kullanarak bir 'dokunmatik ekranlı' cihazı algılamanın en iyi yolu nedir?

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

MsMaxTouchPoints ile birlikte maxTouchPoints kullanma nedeni:

Microsoft, Internet Explorer 11'den başlayarak, bu özelliğin Microsoft satıcısının önekli sürümünün (msMaxTouchPoints) kaldırılabileceğini belirtti ve bunun yerine maxTouchPoints kullanılmasını önerdi.

Kaynak: http://ctrlq.org/code/19616-detect-touch-screen-javascript

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

Her yerde çalışır !!

Kullanırım:

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

jQuery mobile 1.0.1'de

Google Chrome, bu konuda yanlış pozitifler döndürüyor gibi görünüyor:

var isTouch = 'ontouchstart' in document.documentElement;

Sanırım "dokunma olaylarını taklit etme" yeteneği ile bir ilgisi var (F12 -> sağ alt köşedeki ayarlar -> "geçersiz kılmalar" sekmesi -> son onay kutusu). Varsayılan olarak kapalı olduğunu biliyorum, ancak sonuçlardaki değişikliği buna bağlarım (Chrome'da çalışmak için kullanılan "in" yöntemi). Ancak, test ettiğim kadarıyla bu işe yarıyor gibi görünüyor:

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

Tüm tarayıcılarda bu kodu typeof "nesne" durumunda çalıştırıyorum, ancak bunun tanımsız olduğunu bildiğim için daha emin hissediyorum :-)

IE7, IE8, IE9, IE10, Chrome 23.0.1271.64, iPad 21.0.1180.80 için Chrome ve iPad Safari'de test edilmiştir. Birinin daha fazla test yapıp sonuçları paylaşması harika olurdu.

Bunu sitelerimden biri için yazdım ve muhtemelen en kusursuz çözüm. Özellikle Modernizr bile dokunma algılama konusunda yanlış pozitifler alabildiğinden.

JQuery kullanıyorsanız

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

veya sadece saf JS ...

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

İlk gönderim / yorumum için: Hepimiz 'touchstart'ın tıklamadan önce tetiklendiğini biliyoruz. Ayrıca, kullanıcı sayfanızı açtığında şunları yapacağını biliyoruz: 1) fareyi hareket ettirecek 2) tıklayacak 3) ekrana dokunacak (kaydırmak için veya ... :))

Bir şey deneyelim:

// -> Başlat: 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';
});

// <- Bitiş: jQuery

İyi günler!

Tartışmada yukarıda belirtilen aşağıdaki kodu test ettim

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

android Mozilla, chrome, Opera, android varsayılan tarayıcı ve iphone'da safari üzerinde çalışır ... hepsi olumlu ...

benim için sağlam görünüyor :)

Dokunma olaylarını algılamak için Modernizr kaynağından bağlantı verilen konuyla ilgili faydalı bir blog yazısı. Sonuç: Dokunmatik ekranlı cihazları Javascript'ten güvenilir bir şekilde tespit etmek mümkün değildir.

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

Bu benim için çalışıyor:

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

Eğer kullanırsanız Modernizr , çok kolay kullanmaktır Modernizr.touchönce belirtildiği gibi.

Bununla birlikte, Modernizr.touchgüvenli olmak için, kullanıcı aracısı testinin bir kombinasyonunu kullanmayı tercih ediyorum .

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
    }

Modernizr kullanmıyorsanız, Modernizr.touchyukarıdaki işlevi şununla değiştirebilirsiniz:('ontouchstart' in document.documentElement)

Ayrıca, kullanıcı aracısını test etmenin iemobilesize daha geniş bir Microsoft mobil cihaz yelpazesi sunacağını unutmayın Windows Phone.

Ayrıca bu SO sorusuna bakın

JQuery Mobile'da şunları yapabilirsiniz:

$.support.touch

Bunun neden bu kadar belgelenmemiş olduğunu bilmiyorum .. ama tarayıcılar arası güvenlidir (mevcut tarayıcıların en son 2 sürümü).

Daha önce belirtildiği gibi, bir cihaz hem fareyi hem de dokunmatik girişi destekleyebilir. Çoğu zaman, soru "neyin desteklendiği" değil, "şu anda ne kullanıldığı" sorusudur.

Bu durumda, fare olaylarını (fareyle üzerine gelme dinleyicisi dahil) ve aynı şekilde dokunma olaylarını kaydedebilirsiniz.

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

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

...

JavaScript, kullanıcı girdisine bağlı olarak doğru dinleyiciyi otomatik olarak çağırmalıdır. Bu nedenle, bir dokunma olayı durumunda, onTouchStartCallbackvurgulu kodunuzu taklit ederek ateşlenecektir.

Bir dokunuşun her iki tür dinleyiciyi, dokunmayı ve fareyi ateşleyebileceğini unutmayın. Ancak, dokunma dinleyicisi önce gelir ve arama yaparak sonraki fare dinleyicilerin ateşlemesini önleyebilir event.preventDefault().

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

Burada daha fazla bilgi edinin .

İPad geliştirme için kullanıyorum:

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

Daha sonra dokunma tabanlı olaylara (örn. Ontouchstart) veya fare tabanlı olaylara (örn. Onmousedown) seçici olarak bağlanabilirim. Henüz android üzerinde test etmedim.