Виявлення пристроїв із сенсорним екраном за допомогою Javascript

Як у JavaScript / jQuery, як я можу виявити, чи є у клієнтського пристрою миша?

У мене є сайт, який підсуває невелику інформаційну панель, коли користувач наводить курсор миші на предмет. Я використовую jQuery.hoverIntent для виявлення наведення, але це очевидно не працює на пристроях з сенсорним екраном, як iPhone / iPad / Android. Тому на цих пристроях я хочу повернутись, щоб натиснути, щоб показати панель інформації.

+1 за те, що робити, hoverі те і clickінше. Іншим способом може бути використання медіа-запитів CSS та використання деяких стилів лише для менших екранів / мобільних пристроїв, які, найімовірніше, мають функцію touch / tap. Тож якщо у вас є певні стилі за допомогою 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, попередньо встановлену версію цього властивості (msMaxTouchPoints) постачальника Microsoft може бути видалена, і рекомендує замість цього використовувати 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 є "об'єктом", але я відчуваю себе впевненіше, знаючи, що це все, але не визначено :-)

Тестовано на 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";
}

Для мого першого повідомлення / коментаря: Ми всі знаємо, що "сенсорний запуск" спрацьовує перед натисканням. Ми також знаємо, що коли користувач відкриє вашу сторінку, він: вона: 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, хром, Opera, андроїд браузер за замовчуванням та сафарі на 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.

Дивіться також це питання

У 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). Я ще не тестував на android.