如何檢測JavaScript中的設備觸摸支持？

在過去，檢測設備是否支持在JavaScript觸摸事件的時候，我們可以做這樣的事情：如何檢測JavaScript中的設備觸摸支持？

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

然而，谷歌Chrome（17.x.x +）上述檢查返回true，甚至如果底層設備不支持觸摸事件。例如，運行在Windows 7上面的代碼返回true，因此，如果我們喜歡的東西結合起來：

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

在谷歌Chrome，永遠不會觸發事件，因爲我們結合ontouchstart。總之，有沒有人知道一個可靠的方法來規避這一點？我目前運行下面的檢查：

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

這是很不理想......

來源

2013-01-21 BenM

正確的答案是處理兩種事件類型 - 它們不是相互排斥的。

對於支持觸控更可靠的測試，還找window.DocumentTouch && document instanceof DocumentTouch這是一種用於Modernizr

更重要的是其中一個測試，只需使用Modernizr的自己，有它做特徵檢測爲您服務。

請注意，雖然你不能防止誤報，因此我的第一行以上 - 你得到支持兩者。

來源

2013-01-21 13:38:56 Alnitak

正確 - 雖然我有（並且愛）平板電腦，但有時我有鼠標，我不害怕使用它。 –

謝謝。這實際上是一個jQuery插件，我寧願不添加Modernizr的先決條件。然而，出於某種原因'window.DocumentTouch &&文檔instanceof DocumentTouch'返回'undefined' ... – BenM

@BenM你知道可以構建一個Modernizr的自定義下載，它只包含你需要的測試嗎？ – Alnitak

您應該考慮使用經過良好測試（和跨瀏覽器）Modernizr的觸摸測試。

從他們的網站：

// 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

來源

2013-01-21 13:41:52 techfoobar

正確的觀點，錯誤的答案。 Modernizr可以測試觸摸支持的「誤報」，因此您仍應始終支持鼠標事件。 – Alnitak

除此之外，強制用戶使用他們的觸摸屏（而不是他們所持的鼠標）並不好。 –

是的，如果設備支持，應該始終包含鼠標支持幷包含觸摸支持。需要糾正我的答案。 – techfoobar

好老問題，但不得不這樣做沒有圖書館，我創建了以下的解決方案 - 只是讓事件談了他們的自我 - 當您看到touch事件時，只需禁用處理mouse事件。

在coffescript中是這樣的;

  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

剛剛定義功能touchstart，move和end包含實際邏輯....

來源

2015-09-26 16:09:21 Soren

這是Modernizr的如何執行觸摸檢測，以增加支撐的變形與IE10 +觸摸設備一起使用。

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

這不是因爲detecting a touch device is apparently an impossibility萬無一失。

大小可能不同：

舊版觸摸屏設備只有模擬鼠標事件
有些瀏覽器& OS設置當沒有觸摸屏連接
在混合鼠標器/觸摸式/觸控板可以使得觸摸的API /筆/鍵盤環境，這並不表示哪個輸入是使用，只有瀏覽器是敏感 - 它只檢測瀏覽器是否可以接受或模擬觸摸輸入。例如，用戶可以隨時使用鼠標切換觸摸筆記本電腦或鼠標連接的平板電腦上的屏幕。

更新： 一個小竅門：不要使用觸摸功能檢測，以控制&指定UI行爲，use event listeners instead。針對click/touch/keyup事件而非設備的設計，觸摸功能檢測通常用於節省添加事件偵聽器的CPU /內存開銷。觸摸檢測的一個例子可能是有用的和適當的：

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

來源

2015-12-08 01:05:46 Benson

爲我工作，謝謝！ –

不客氣！ – Benson

如何檢測JavaScript中的設備觸摸支持？

回答

相關問題