JavaScript kullanarak bir 'dokunmatik ekran' cihazı tespit etmenin en iyi yolu nedir?

Hem masaüstü hem de mobil cihazlarda kullanım için bir jQuery eklentisi yazdım. JavaScript ile cihazın dokunmatik ekran özelliğine sahip olup olmadığını tespit etmenin bir yolu olup olmadığını merak ettim. Dokunmatik ekran olaylarını tespit etmek için jquery-mobile.js kullanıyorum ve iOS, Android vb.

Mümkün mü?

Güncelleme: Tüm özellik algılama kitaplığını projenize çekmeden önce lütfen aşağıdaki blmstr yanıtını okuyun . Gerçek dokunma desteğini tespit etmek daha karmaşıktır ve Modernizr yalnızca temel bir kullanım durumunu kapsar.

Modernizr , herhangi bir sitede her türlü özellik tespiti yapmanın harika ve hafif bir yoludur.

Her özellik için html öğesine sınıflar ekler.

Daha sonra bu özellikleri CSS ve JS'de kolayca hedefleyebilirsiniz. Örneğin:

html.touch div {
    width: 480px;
}

html.no-touch div {
    width: auto;
}

Ve Javascript (jQuery örneği):

$('html.touch #popup').hide();

Bu işlevi kullanmayı denediniz mi? (Bu, Modernizr'ın kullandığı ile aynıdır.)

function is_touch_device() {  
  try {  
    document.createEvent("TouchEvent");  
    return true;  
  } catch (e) {  
    return false;  
  }  
}

console.log(is_touch_device());

GÜNCELLEME 1

document.createEvent("TouchEvent")trueen son kromu kullanmaya başladı (v. 17). Modernizr bunu bir süre önce güncelledi. Modernizr testine buradan göz atın .

Çalışmasını sağlamak için işlevinizi şu şekilde güncelleyin:

function is_touch_device1() {
  return 'ontouchstart' in window;
}

console.log(is_touch_device1());

GÜNCELLEME 2

Yukarıdaki IE10 (MS Surface üzerinde false döndüren) üzerinde çalışma değildi bulundu. İşte düzeltme:

function is_touch_device2() {
  return 'ontouchstart' in window        // works on most browsers 
  || 'onmsgesturechange' in window;  // works on IE10 with some false positives
};

console.log(is_touch_device2());

GÜNCELLEME 3

'onmsgesturechange' in windowgüvenilir değil bazı IE masaüstü sürümlerinde doğru dönecektir. Bu biraz daha güvenilir bir şekilde çalışır:

function is_touch_device3() {
  return !!('ontouchstart' in window        // works on most browsers 
  || navigator.maxTouchPoints);       // works on IE10/11 and Surface
};

console.log(is_touch_device3());

GÜNCELLEME 2018

Zaman geçiyor ve bunu test etmenin yeni ve daha iyi yolları var. Temelde Modernizr'in kontrol etme yöntemini çıkardım ve basitleştirdim:

function is_touch_device4() {
    
    var prefixes = ' -webkit- -moz- -o- -ms- '.split(' ');
    
    var mq = function (query) {
        return window.matchMedia(query).matches;
    }

    if (('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch) {
        return true;
    }

    // include the 'heartz' as a way to have a non matching MQ to help terminate the join
    // https://git.io/vznFH
    var query = ['(', prefixes.join('touch-enabled),('), 'heartz', ')'].join('');
    return mq(query);
}

console.log(is_touch_device4());

Burada touch-enabledbiraz garip ve kötü bir uygulama olduğunu düşünüyorum standart olmayan medya sorgu özelliği kullanıyorlar . Ama hey, gerçek dünyada sanırım işe yarıyor. Gelecekte (herkes tarafından desteklendiklerinde) bu medya sorgusu özellikleri size aynı sonuçları verebilir: pointerve hover.

Check out Modernizr nasıl yapıyorlar kaynağını .

Dokunmatik algılama ile ilgili sorunları açıklayan iyi bir makale için bkz. Stu Cox: Bir Dokunmatik Ekranı Tespit Edemezsiniz .

Modernizr, Windows Phone 8 / WinRT'de IE10'u algılamadığından, basit bir çapraz tarayıcı çözümü:

var supportsTouch = 'ontouchstart' in window || navigator.msMaxTouchPoints;

Cihaz bir kez dokunmayı desteklemeyeceği veya desteklemeyeceği için yalnızca bir kez kontrol etmeniz gerekir, bu yüzden sadece bir değişkende saklayın, böylece birden çok kez daha verimli kullanabilirsiniz.

Yukarıdaki tüm yorumları kullanarak benim ihtiyaçları için çalışan aşağıdaki kodu monte:

var isTouch = (('ontouchstart' in window) || (navigator.msMaxTouchPoints > 0));

Bunu iPad, Android (Tarayıcı ve Chrome), Blackberry Playbook, iPhone 4s, Windows Phone 8, IE 10, IE 8, IE 10 (Dokunmatik Ekranlı Windows 8), Opera, Chrome ve Firefox'ta test ettim.

Şu anda Windows Phone 7'de başarısız oluyor ve henüz bu tarayıcı için bir çözüm bulamadım.

Umarım birisi bunu faydalı bulur.

Etkileşim ortamı özelliklerinin tanıtımından bu yana şunları yapabilirsiniz:

if(window.matchMedia("(pointer: coarse)").matches) {
    // touchscreen
}

https://www.w3.org/TR/mediaqueries-4/#descdef-media-any-pointer

Güncelleme (yorumlardan dolayı): Yukarıdaki çözüm, bir "kaba işaretçi" nin (genellikle bir dokunmatik ekran) birincil giriş cihazı olup olmadığını tespit etmektir. Fare gibi bir aygıtın dokunmatik ekranı olup olmadığını tespit etmek istiyorsanız, any-pointer: coarsebunun yerine kullanabilirsiniz .

Daha fazla bilgi için buraya bir göz atın: Tarayıcının fare olmadığını ve yalnızca dokunmatik olduğunu algılama

Bunu beğendim:

function isTouchDevice(){
    return typeof window.ontouchstart !== 'undefined';
}

alert(isTouchDevice());

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

Ancak, Modernizr.touchsadece güvenli olmak için bir kombinasyon ve kullanıcı aracısı testi kullanmayı tercih ederim .

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 basitçe('ontouchstart' in document.documentElement)

Ayrıca, kullanıcı aracısını test etmenin iemobile, size tespit edilen Microsoft mobil cihazlarından daha geniş bir aralık sunacağını unutmayın Windows Phone.

Ayrıca bu SO sorusuna bakın

Modernizr uygulamasını denedik, ancak dokunma olaylarını tespit etmek artık tutarlı değil (IE 10'un Windows masaüstünde dokunma olayları var, IE 11 çalışıyor, çünkü dokunma olaylarını düşürdüm ve işaretçi api ekledim).

Bu nedenle, kullanıcının hangi giriş türüne sahip olduğunu bilmediğimiz sürece web sitesini bir dokunmatik site olarak optimize etmeye karar verdik. Bu, diğer tüm çözümlerden daha güvenilirdir.

Araştırmalarımız, çoğu masaüstü kullanıcısının fare ile tıklamadan önce ekran üzerinde hareket ettiğini söylüyor, böylece herhangi bir şeyi tıklayamadan veya üzerine gelmeden önce bunları tespit edebiliyor ve davranışı değiştirebiliyoruz.

Bu, kodumuzun basitleştirilmiş bir sürümüdür:

var isTouch = true;
window.addEventListener('mousemove', function mouseMoveDetector() {
    isTouch = false;
    window.removeEventListener('mousemove', mouseMoveDetector);
});

Çalışma keman

Ben böyle başardım;

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

if(isTouchDevice()===true) {
    alert('Touch Device'); //your logic for touch device
}
else {
    alert('Not a Touch Device'); //your logic for non touch device
}

Bir touchScreen'e sahip olup olmadıklarını kontrol etmekten daha iyi bir şey var, kullanılıp kullanılmadıklarını kontrol etmektir, ayrıca kontrol edilmesi daha kolaydır.

if (window.addEventListener) {
    var once = false;
    window.addEventListener('touchstart', function(){
        if (!once) {
            once = true;
            // Do what you need for touch-screens only
        }
    });
}

Bu Windows Yüzey tabletlerinde bile iyi çalışır !!!

function detectTouchSupport {
msGesture = window.navigator && window.navigator.msPointerEnabled && window.MSGesture,
touchSupport = (( "ontouchstart" in window ) || msGesture || window.DocumentTouch &&     document instanceof DocumentTouch);
if(touchSupport) {
    $("html").addClass("ci_touch");
}
else {
    $("html").addClass("ci_no_touch");
}
}

Dokunma olup olmadığını tespit etmek için yukarıdaki kodun parçalarını kullandım, bu yüzden fancybox iframe'leri dokunmatik bilgisayarlarda değil masaüstü bilgisayarlarda görünecekti. Android 4.0 için Opera Mini'nin yalnızca blmstr kodunu kullanırken hala dokunmatik olmayan bir cihaz olarak kaydedildiğini fark ettim. (Nedenini bilen var mı?)

Ben kullanarak sona erdi:

<script>
$(document).ready(function() {
    var ua = navigator.userAgent;
    function is_touch_device() { 
        try {  
            document.createEvent("TouchEvent");  
            return true;  
        } catch (e) {  
            return false;  
        }  
    }

    if ((is_touch_device()) || ua.match(/(iPhone|iPod|iPad)/) 
    || ua.match(/BlackBerry/) || ua.match(/Android/)) {
        // Touch browser
    } else {
        // Lightbox code
    }
});
</script>

Dokunmayı algılamaya çalışan en büyük "gotcha", hem dokunmayı hem de izleme dörtgenini / fareyi destekleyen hibrit cihazlarda. Kullanıcının cihazının dokunmayı destekleyip desteklemediğini doğru bir şekilde tespit edebilseniz bile, gerçekten yapmanız gereken kullanıcının şu anda hangi giriş cihazını kullandığını tespit etmektir . Bu zorluğun ayrıntılı bir yazımı ve burada olası bir çözüm var .

Bir kullanıcı sadece ekranı dokundu veya bir fare / dokunmatik yerine a hem kayıt olup kullanılan yetip için Temelde yaklaşım touchstartve mouseoversayfasından etkinliğe:

document.addEventListener('touchstart', functionref, false) // on user tap, "touchstart" fires first
document.addEventListener('mouseover', functionref, false) // followed by mouse event, ie: "mouseover"

Dokunma eylemi bu olayların her ikisini de tetikleyecektir, ancak eski ( touchstart) her zaman çoğu cihazda ilk sıradadır. Bu öngörülebilir olay dizisine güvenerek , kullanıcının şu anda belgedeki geçerli giriş türünü can-touchyansıtmak için belge köküne dinamik olarak bir sınıf ekleyen veya kaldıran bir mekanizma oluşturabilirsiniz :

;(function(){
    var isTouch = false //var to indicate current input type (is touch versus no touch) 
    var isTouchTimer 
    var curRootClass = '' //var indicating current document root class ("can-touch" or "")
     
    function addtouchclass(e){
        clearTimeout(isTouchTimer)
        isTouch = true
        if (curRootClass != 'can-touch'){ //add "can-touch' class if it's not already present
            curRootClass = 'can-touch'
            document.documentElement.classList.add(curRootClass)
        }
        isTouchTimer = setTimeout(function(){isTouch = false}, 500) //maintain "istouch" state for 500ms so removetouchclass doesn't get fired immediately following a touch event
    }
     
    function removetouchclass(e){
        if (!isTouch && curRootClass == 'can-touch'){ //remove 'can-touch' class if not triggered by a touch event and class is present
            isTouch = false
            curRootClass = ''
            document.documentElement.classList.remove('can-touch')
        }
    }
     
    document.addEventListener('touchstart', addtouchclass, false) //this event only gets called when input type is touch
    document.addEventListener('mouseover', removetouchclass, false) //this event gets called when input type is everything from touch to mouse/ trackpad
})();

Daha fazla ayrıntı burada .

Şuna bak yazı , bu touchstart olay denir, yapmanız dokunmatik cihazlar algılandığında yapmak ya da ne ne için gerçekten güzel bir kod parçası verecektir:

$(function(){
  if(window.Touch) {
    touch_detect.auto_detected();
  } else {
    document.ontouchstart = touch_detect.surface;
  }
}); // End loaded jQuery
var touch_detect = {
  auto_detected: function(event){
    /* add everything you want to do onLoad here (eg. activating hover controls) */
    alert('this was auto detected');
    activateTouchArea();
  },
  surface: function(event){
    /* add everything you want to do ontouchstart here (eg. drag & drop) - you can fire this in both places */
    alert('this was detected by touching');
    activateTouchArea();
  }
}; // touch_detect
function activateTouchArea(){
  /* make sure our screen doesn't scroll when we move the "touchable area" */
  var element = document.getElementById('element_id');
  element.addEventListener("touchstart", touchStart, false);
}
function touchStart(event) {
  /* modularize preventing the default behavior so we can use it again */
  event.preventDefault();
}

Bir aygıtın dokunmatik aygıt olup olmadığını belirlemek için ekran genişliğini kullanmaktan kaçınırım. 699 pikselden çok daha büyük dokunmatik ekranlar var, Windows 8'i düşünün. Navigatior.userAgent yanlış duruşları geçersiz kılmak için güzel olabilir.

Modernizr bu sorunu kontrol etmenizi tavsiye ederim .

Cihazın dokunma olaylarını destekleyip desteklemediğini veya bir dokunmatik cihaz olup olmadığını test etmek mi istiyorsunuz? Ne yazık ki, bu aynı şey değil.

Hayır, bu mümkün değil. Verilen mükemmel cevaplar sadece kısmi, çünkü verilen herhangi bir yöntem yanlış pozitif ve yanlış negatif üretecektir. Tarayıcı bile, işletim sistemi API'ları nedeniyle bir dokunmatik ekranın olup olmadığını her zaman bilmez ve bir tarayıcı oturumu sırasında, özellikle de KVM tipi düzenlemelerle, gerçek değişebilir.

Bu mükemmel makaledeki diğer ayrıntılara bakın:

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

Makale, dokunmatik ekranları algılamanızı isteyen varsayımları yeniden gözden geçirmenizi önerir, muhtemelen yanlıştır. (Uygulamam için kendimi kontrol ettim ve varsayımlarım gerçekten yanlıştı!)

Makale şu sonuca varıyor:

Düzenler için herkesin dokunmatik ekranı olduğunu varsayın. Fare kullanıcıları, büyük UI denetimlerini dokunmatik kullanıcıların küçük olanları kullanabileceğinden çok daha kolay kullanabilir. Aynı durum fareyle üzerine gelme durumları için de geçerlidir.

Etkinlikler ve etkileşimler için, herhangi birinin dokunmatik ekrana sahip olabileceğini varsayın. Klavye, fare ve dokunma etkileşimlerini yan yana getirerek hiçbirinin birbirini engellememesini sağlayın.

Bu çalışmaların çoğu jQuery gerektirir veya javascript linters sözdiziminden şikayet eder. İlk sorunuz, bunu çözmenin bir "JavaScript" (jQuery değil, Modernizr değil) yolunu düşündüğünüzde, her seferinde çalışan basit bir işlev. Ayrıca alabildiğiniz kadar az.

function isTouchDevice() {
    return !!window.ontouchstart;
}

console.log(isTouchDevice());

Bahseteceğim son bir fayda, bu kodun çerçeve ve cihaz agnostik olmasıdır. Zevk almak!

Görünüşe göre Chrome 24, muhtemelen Windows 8 için dokunma olaylarını destekliyor gibi. Bu nedenle, burada yayınlanan kod artık çalışmıyor. Dokunmanın tarayıcı tarafından desteklenip desteklenmediğini algılamak yerine, artık hem dokunma hem de tıklama olaylarını bağlayıp yalnızca bir tanesinin çağrıldığından emin oluyorum:

myCustomBind = function(controlName, callback) {

  $(controlName).bind('touchend click', function(e) {
    e.stopPropagation();
    e.preventDefault();

    callback.call();
  });
};

Sonra çağırıyoruz:

myCustomBind('#mnuRealtime', function () { ... });

Bu yardımcı olur umarım !

Masaüstü için Firefox dışında desteklenen tüm tarayıcılar, Touch-Button'ı tıklasanız da tıklamasanız bile, masaüstü için Firefox desteği geliştirici için duyarlı tasarımı nedeniyle her zaman DOĞRU !

Umarım Mozilla bunu bir sonraki sürümde düzeltir.

Firefox 28 masaüstünü kullanıyorum.

function isTouch()
{
    return !!("ontouchstart" in window) || !!(navigator.msMaxTouchPoints);
}

jQuery v1.11.3

Verilen cevaplarda birçok iyi bilgi var. Ama son zamanlarda, her şeyi başarmak için her şeyi çalışan bir çözüme bağlamak için çok zaman harcadım:

1. Kullanılan cihazın bir dokunmatik ekran tipi cihaz olduğunu tespit edin.
2. Cihazın hafifçe vurulduğunu tespit edin.

Bu yazının ve Javascript ile dokunmatik ekran cihazlarının yanı sıra , Patrick Lauke'nin bu yazısını son derece yararlı buldum: https://hacks.mozilla.org/2013/04/detecting-touch-its-the-why-not-the-how /

İşte kod ...

$(document).ready(function() {
//The page is "ready" and the document can be manipulated.

    if (('ontouchstart' in window) || (navigator.maxTouchPoints > 0) || (navigator.msMaxTouchPoints > 0))
    {
      //If the device is a touch capable device, then...
      $(document).on("touchstart", "a", function() {

        //Do something on tap.

      });
    }
    else
    {
      null;
    }
});

Önemli! *.on( events [, selector ] [, data ], handler )Yöntem ihtiyacı "touchstart" etkinliği ya da dokunur ilişkili olay gibi başka işleyebilir bir seçici, genellikle bir öğe, var. Bu durumda, "a" köprü elemanıdır.

Şimdi, JavaScript'te normal fare tıklatmasıyla uğraşmanıza gerek yok, çünkü aşağıdaki gibi "a" öğesi köprüsü için seçicileri kullanarak bu olayları işlemek için CSS kullanabilirsiniz:

/* unvisited link */
a:link 
{

}

/* visited link */
a:visited 
{

}

/* mouse over link */
a:hover 
{

}

/* selected link */
a:active 
{

}

Not: Başka seçiciler de var ...

var isTouchScreen = 'createTouch' in document;

veya

var isTouchScreen = 'createTouch' in document || screen.width <= 699 || 
    ua.match(/(iPhone|iPod|iPad)/) || ua.match(/BlackBerry/) || 
    ua.match(/Android/);

sanırım daha kapsamlı bir kontrol olurdu.

Kullanırım:

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

jQuery mobile 1.0.1 içinde

Ayrıca, sayfanın bir dokunmatik ekran cihazında görüntülenip görüntülenmediğini Javascript'te nasıl algılayacağımız konusunda farklı seçeneklerle çok uğraştım. IMO, şu an için, seçeneği doğru bir şekilde tespit etmek için gerçek bir seçenek yok. Tarayıcılar, masaüstü makinelerde dokunma olaylarını bildirir (çünkü işletim sistemi dokunmaya hazır olabilir) veya bazı çözümler tüm mobil cihazlarda çalışmaz.

Sonunda, en başından itibaren yanlış yaklaşımı izlediğimi fark ettim: Sayfam dokunmatik ve dokunmatik olmayan cihazlarda benzer görünecek olsaydı, belki de mülkü tespit etme konusunda endişelenmemeliydim: Senaryom şuydu: düğmeyi etkinleştirmek için tek bir dokunuş olmasını istediğim çift dokunuşlara yol açtıklarından, dokunmatik cihazlardaki düğmelerin üzerindeki araç ipuçlarını devre dışı bırakmak için.

Benim çözümüm bir düğme üzerinde hiçbir araç ipucu gerekli böylece görünümü yeniden , ve sonunda tüm dezavantajları olan yöntemler ile Javascript dokunmatik cihazı tespit etmek gerek yoktu .

Modernizatörü kurabilir ve basit bir dokunma olayı kullanabilirsiniz. Bu çok etkilidir ve Windows yüzeyi dahil olmak üzere test ettiğim her cihazda çalışır!

Bir jsFiddle oluşturdum

function isTouchDevice(){
    if(Modernizr.hasEvent('touchstart') || navigator.userAgent.search(/Touch/i) != -1){
         alert("is touch");
            return true;
         }else{
            alert("is not touch");
            return false;
    }
}

Pratik cevap, bağlamı dikkate alan bir cevap gibi görünmektedir:

1) Genel site (giriş yok)
Kullanıcı arayüzünü her iki seçenekle birlikte çalışacak şekilde kodlayın.

2) Oturum açma sitesi
Oturum açma formunda fare hareketinin olup olmadığını yakalayın ve bunu gizli bir girişe kaydedin. Değer, oturum açma kimlik bilgileriyle iletilir ve kullanıcının oturumuna eklenir , böylece oturum süresince kullanılabilir.

Sadece giriş sayfasına eklemek için jquery:

$('#istouch').val(1); // <-- value will be submitted with login form

if (window.addEventListener) {
    window.addEventListener('mousemove', function mouseMoveListener(){
        // Update hidden input value to false, and stop listening
        $('#istouch').val(0); 
        window.removeEventListener('mousemove', mouseMoveListener);
    });
} 

(Cevaplarında +1Dave Burt'a ve +1Martin Lantzsch'a +1)

Sorun

Dokunma ve fare girişinin bir kombinasyonunu kullanan karma cihazlar nedeniyle , kullanıcının bir dokunma kullanıcısı olup olmadığı konusunda bir kod parçasının çalıştırılıp çalıştırılmayacağını kontrol eden durumu / değişkeni dinamik olarak değiştirebilmeniz gerekir.

Dokunmatik cihazlar da mousemovemuslukta ateş ediyor.

Çözüm

1. Yükte dokunmanın yanlış olduğunu varsayın.
2. Bir touchstartolay tetiklenene kadar bekleyin , ardından doğru olarak ayarlayın.
3. Touchstart tetiklendiyse, bir fareyle üzerine gelme işleyicisi ekleyin.
4. Ateşleme sırasında iki fareyle taşınan olay arasındaki süre 20 ms'den azsa, giriş olarak bir fare kullandıklarını varsayın. Etkinliği artık gerekmediğinden kaldırın ve fareyle üzerine gelme fare aygıtları için pahalı bir olaydır.
5. Touchstart tekrar başlatıldığında (kullanıcı dokunma işlevine geri döndü), değişken tekrar true değerine ayarlanır. Ve işlemi tekrarlayın, böylece dinamik bir şekilde belirlenir. Bazı mucize mousemove dokunarak iki kez saçma sapan hızlı bir şekilde ateşlenirse (testlerimde 20ms içinde yapmak neredeyse imkansız), bir sonraki dokunmatik başlangıç ​​tekrar doğruya dönecektir.

Android için Safari iOS ve Chrome'da test edildi.

Not: MS Surface, vb için işaretçi olaylarında% 100 emin değilim.

Codepen demosu

const supportsTouch = 'ontouchstart' in window;
let isUsingTouch = false;

// `touchstart`, `pointerdown`
const touchHandler = () => {
  isUsingTouch = true;
  document.addEventListener('mousemove', mousemoveHandler);
};

// use a simple closure to store previous time as internal state
const mousemoveHandler = (() => {
  let time;

  return () => {
    const now = performance.now();

    if (now - time < 20) {
      isUsingTouch = false;
      document.removeEventListener('mousemove', mousemoveHandler);
    }

    time = now;
  }
})();

// add listeners
if (supportsTouch) {
  document.addEventListener('touchstart', touchHandler);
} else if (navigator.maxTouchPoints || navigator.msMaxTouchPoints) {
  document.addEventListener('pointerdown', touchHandler);
}

Aslında, bu soruyu araştırdım ve tüm durumları ele aldım. çünkü bu benim projemde de büyük bir sorun. Bu yüzden aşağıdaki fonksiyona ulaşıyorum, tüm cihazlardaki tüm tarayıcıların tüm sürümleri için çalışıyor:

const isTouchDevice = () => {
  const prefixes = ['', '-webkit-', '-moz-', '-o-', '-ms-', ''];
  const mq = query => window.matchMedia(query).matches;

  if (
    'ontouchstart' in window ||
    (window.DocumentTouch && document instanceof DocumentTouch)
  ) {
    return true;
  }
  return mq(['(', prefixes.join('touch-enabled),('), 'heartz', ')'].join(''));
};

İpucu : Kesinlikle,isTouchDevicesadecebooleandeğerleridöndürür.

JQuery supportnesnesini genişlet :

jQuery.support.touch = 'ontouchend' in document;

Ve şimdi herhangi bir yerde kontrol edebilirsiniz, şöyle:

if( jQuery.support.touch )
   // do touch stuff

Bu benim için şimdiye kadar iyi çalışıyor gibi görünüyor:

//Checks if a touch screen
is_touch_screen = 'ontouchstart' in document.documentElement;

if (is_touch_screen) {
  // Do something if a touch screen
}
else {
  // Not a touch screen (i.e. desktop)
}

Bir fare takıldığında, kullanıcının fareyi sayfa hazır olduktan sonra en az küçük bir mesafeyi herhangi bir tıklama yapmadan hareket ettirdiği oldukça yüksek bir hitrate (pratik olarak% 100 diyebilirim) varsayılabilir. Aşağıdaki mekanizma bunu tespit eder. Tespit edilirse, bunu eksik dokunmatik desteğin bir işareti olarak veya destekleniyorsa, bir fare kullanılırken önemsiz olarak görüyorum. Dokunmatik cihaz algılanmazsa varsayılır.

DÜZENLE Bu yaklaşım her amaca uygun olmayabilir. Yüklenen sayfadaki kullanıcı etkileşimi, örneğin bir resim görüntüleyici temelinde etkinleştirilen işlevselliği kontrol etmek için kullanılabilir. Aşağıdaki kod, fareyle üzerine gelme olayını, şimdi göze çarptığı için faresiz cihazlara bağlı bırakacaktır. Diğer yaklaşımlar daha iyi olabilir.

Kabaca, şu şekilde gider (jQuery için özür dilerim, ancak saf Javascript'te benzer):

var mousedown, first, second = false;
var ticks = 10;
$(document).on('mousemove', (function(e) {
    if(UI.mousechecked) return;
    if(!first) {
        first = e.pageX;
        return;
        }
    if(!second && ticks-- === 0) {
        second = e.pageX;
        $(document).off('mousemove'); // or bind it to somewhat else
        }
    if(first  && second  && first !== second && !mousedown){
        // set whatever flags you want
        UI.hasmouse = true;
        UI.touch = false;
        UI.mousechecked = true;
    }

    return;
}));
$(document).one('mousedown', (function(e) {
    mousedown = true;
    return;
}));
$(document).one('mouseup', (function(e) {
    mousedown = false;
    return;
}));