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

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

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

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

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

var isTouchDevice = 'ontouchstart' in document.documentElement;

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

Найдено тестирование для window.Touch не работает на android, но это работает:

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

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

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

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

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

Я использую:

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

в jQuery Mobile 1.0.1

Google Chrome, похоже, возвращает ложные срабатывания по этому поводу:

var isTouch = 'ontouchstart' in document.documentElement;

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

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

Во всех браузерах, в которых я запускал этот код, указано, что typeof является «объектом», но я уверен, что это что угодно, но не undefined :-)

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

Написал это для одного из моих сайтов и, вероятно, является самым надежным решением. Тем более, что даже 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";
}

Для моего первого поста / комментария: все мы знаем, что touchstart срабатывает перед щелчком. Мы также знаем, что когда пользователь откроет вашу страницу, он или она: 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

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

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

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

работает на android Mozilla, chrome, Opera, браузер android по умолчанию и safari на iphone ... все положительно ...

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

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

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

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

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

Если вы используете 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

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

$.support.touch

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

Как уже упоминалось, устройство может поддерживать как ввод с помощью мыши, так и сенсорный ввод. Очень часто вопрос не в том, «что поддерживается», а в том, «что используется в настоящее время».

В этом случае вы можете просто зарегистрировать события мыши (включая прослушиватель наведения) и события касания.

element.addEventListener('touchstart',onTouchStartCallback,false);

element.addEventListener('onmousedown',onMouseDownCallback,false);

...

JavaScript должен автоматически вызывать правильный слушатель на основе ввода пользователя. Итак, в случае касания,onTouchStartCallback будет запущено, эмулируя ваш код наведения.

Обратите внимание, что прикосновение может активировать оба типа слушателей: прикосновение и мышь. Однако слушатель касания идет первым и может предотвратить запуск последующих слушателей мыши путем вызова event.preventDefault().

function onTouchStartCallback(ev) {
    // Call preventDefault() to prevent any further handling
    ev.preventDefault();
    your code...
}

Дополнительная информация здесь .

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

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

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