0

У меня есть 3 кнопки с зависающими состояниями, которые создают небольшую подсказку, чтобы описать кнопку. Они работают нормально, но на сенсорном экране они не исчезают после того, как пользователь нажимает кнопку.Проверьте устройство Touch с Javascript

Так что я пробовал несколько скриптов js для проверки того, является ли устройство сенсорным устройством или нет. Они почти работают, но они также, когда я тестирую IE11, он также обнаруживается как сенсорное устройство. Chrome & Firefox не ошибается как сенсорное устройство.

Любые санкции?

Ее то, что я пытался

/***************************** 
TOUCH DEVICES HOVER FIX START 
****************************/ 
// http://stackoverflow.com/a/4819886/1814446 
function isTouchDevice() { 
    return 'ontouchstart' in window // works on most browsers 
     || 'onmsgesturechange' in window; // works on ie10 
}; 

// http://www.stucox.com/blog/you-cant-detect-a-touchscreen/#poke-it 
var hasTouch; 
window.addEventListener('touchstart', function setHasTouch() { 
    hasTouch = true; 
    // Remove event listener once fired, otherwise it'll kill scrolling 
    // performance 
    window.removeEventListener('touchstart', setHasTouch); 
}, false); 

// https://github.com/Modernizr/Modernizr/blob/master/feature-detects/touchevents.js 
define(['Modernizr', 'prefixes', 'testStyles'], function(Modernizr, prefixes, testStyles) { 
    // Chrome (desktop) used to lie about its support on this, but that has since been rectified: http://crbug.com/36415 
    Modernizr.addTest('touchevents', function() { 
     var bool; 
     if(('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch) { 
      bool = true; 
     } else { 
      var query = ['@media (',prefixes.join('touch-enabled),('),'heartz',')','{#modernizr{top:9px;position:absolute}}'].join(''); 
      testStyles(query, function(node) { 
       bool = node.offsetTop === 9; 
      }); 
     } 
     return bool; 
    }); 
}); 

if(bool===true) { 
    console.log('Touch Device'); //your logic for touch device 
    jQ("#btn-1, #btn-2, #btn-3").click(function() { 
     jQ("#btn-1 .tooltip").css('opacity', '0'); 
     jQ("#btn-2 .tooltip").css('opacity', '0'); 
     jQ("#btn-3 .tooltip").css('opacity', '0'); 
    }); 
} 
else { 
    //your logic for non touch device 
} 
+0

Это по-прежнему противоречивы. вы пытались => функция isTouchDevice() { \t return (('ontouchstart' в окне) || window.DocumentTouch && document instanceof DocumentTouch || (typeof (navigator.msMaxTouchPoints)! = "undefined" && (navigator.msMaxTouchPoints> 0)))? true: false; } – SSA

ответ

0

Для IE10 + вы можете использовать "window.navigator.msMaxTouchPoints"

пример кода

function isIETouch() 
{ 
return window.navigator.msMaxTouchPoints == undefined ? false : window.navigator.msMaxTouchPoints; 
} 
Смежные вопросы