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

Question

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

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

Answer 1

var isTouchDevice = 'ontouchstart' in document.documentElement;

Примечание : просто потому, что устройство поддерживает сенсорные события, не обязательно означает, что оно является исключительно устройством с сенсорным экраном. Многие устройства (например, мой Asus Zenbook) поддерживают события как нажатия, так и касания, даже если у них нет реальных механизмов сенсорного ввода. При разработке поддержки сенсорного ввода всегда включайте поддержку событий щелчка и никогда не предполагайте, что какое-либо устройство является исключительно одним или другим.

Answer 2

Найдено тестирование для окна. Сенсорный не работает на Android, но это делает:

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

См. Статью: Какой лучший способ обнаружить устройство с «сенсорным экраном» с помощью JavaScript?

Answer 3

+ 1 для выполнения hover и click обоих. Другим способом может быть использование медиазапросов CSS и использование некоторых стилей только для небольших экранов / мобильных устройств, которые с наибольшей вероятностью имеют функцию касания / нажатия. Поэтому, если у вас есть определенные стили с помощью CSS, и в jQuery вы проверяете эти элементы для свойств стиля мобильного устройства, вы можете подключиться к ним, чтобы написать свой код для мобильного устройства.

Смотрите здесь: http://www.forabeautifulweb.com/blog/about/hardboiled_css3_media_queries/

Answer 4

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

Причина использования maxTouchPoints вместе с msMaxTouchPoints:

Microsoft заявила, что начиная с Internet Explorer 11, Версия этого свойства с префиксом поставщика Microsoft (msMaxTouchPoints) может быть удален и рекомендует использовать maxTouchPoints вместо этого.

Источник: http://ctrlq.org/code/19616-detect-touch-screen-javascript

Answer 5

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

Работает везде !!

Answer 6

Для моего первого поста / комментария: мы все знаем, что «сенсорный запуск» срабатывает до щелчка.Мы также знаем, что когда пользователь откроет вашу страницу, он или она: 1) переместит мышь 2) нажмет 3) коснется экрана (для прокрутки или ... :))

Давайте попробуем что-то:

// -> Начало: 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';
});

// <- Конец: jQuery </p>

Хорошего дня!

Answer 7

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

Если вы используете jQuery

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

или просто чистый JS ...

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

Answer 8

Похоже, что Google Chrome возвращает ложные срабатывания:

var isTouch = 'ontouchstart' in document.documentElement;

Я полагаю, что это как-то связано с его способностью "эмулировать сенсорные события" (F12 -> настройки в правом нижнем углу -> вкладка "переопределения" -> последний флажок). Я знаю, что по умолчанию он отключен, но это то, с чем я связываю изменение результатов (метод "in", используемый для работы в Chrome). Однако, похоже, это работает, насколько я тестировал:

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

Все браузеры, в которых я запускаю этот код в состоянии, typeof является "объектом", но я чувствую себя более уверенным, зная, что это что-то, но не определено

Протестировано на IE7, IE8, IE9, IE10, Chrome 23.0.1271.64, Chrome для iPad 21.0.1180.80 и iPad Safari. Было бы здорово, если бы кто-то сделал еще несколько тестов и поделился результатами.

Answer 9

Я использую:

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

в jQuery mobile 1.0.1

Answer 10

Полезный пост в блоге на эту тему, связанный с источником Modernizr для обнаружения сенсорных событий. Вывод: невозможно надежно обнаружить устройства с сенсорным экраном из Javascript.

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