Обнаружение устройств с сенсорным экраном с помощью Javascript

Question

В Javascript / jQuery, как я могу определить, есть ли на клиентском устройстве мышь?

У меня есть сайт, на котором появляется небольшая информационная панель, когда пользователь наводит указатель мыши на элемент. Я использую jQuery.hoverIntent для обнаружения наведения, но это явно не работает на устройствах с сенсорным экраном, таких как iPhone / iPad / Android. Поэтому на этих устройствах я бы хотел вернуться, чтобы отобразить информационную панель.

Answer 1

Я протестировал следующий код, упомянутый выше в обсуждении

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

работает на Android Mozilla, Chrome, Opera, Android-браузер по умолчанию и сафари на iPhone ... все положительные ...

мне кажется солидным:)

Answer 2

Это работает для меня:

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

Answer 3

В jQuery Mobile вы можете просто:

$.support.touch

Не знаю, почему это так недокументировано ... но это безопасно для кроссбраузеров (последние 2 версии текущих браузеров)

Answer 4

Если вы используете Modernizr , очень просто использовать Modernizr.touch, как упоминалось ранее.

Однако я предпочитаю использовать комбинацию Modernizr.touch и тестирование пользовательского агента, просточтобы быть в безопасности.

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, вы можете просто заменить приведенную выше функцию Modernizr.touch на ('ontouchstart' in document.documentElement)

Также обратите внимание, что тестирование агента пользователя iemobile даст вам более широкий диапазон обнаруженных мобильных устройств Microsoft, чем Windows Phone.

Также см. этот вопрос SO

Answer 5

Для разработки iPad я использую:

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

Затем я могу выборочно связываться с событиями на основе касания (например, ontouchstart) или событиями на основе мыши (например, onmousedown).Я еще не тестировал на Android.