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

Question

Я написал плагин jQuery для использования на настольных и мобильных устройствах. Я задавался вопросом, есть ли способ с JavaScript, чтобы обнаружить, если устройство имеет возможность сенсорного экрана. Я использую jquery-mobile.js для обнаружения событий сенсорного экрана, и он работает на iOS, Android и т. Д., Но я также хотел бы написать условные операторы, основанные на том, имеет ли устройство пользователя сенсорный экран.

Это возможно?

Answer 1

Вы можете использовать следующий код:

function isTouchDevice() {
   var el = document.createElement('div');
   el.setAttribute('ongesturestart', 'return;'); // or try "ontouchstart"
   return typeof el.ongesturestart === "function";
}

Источник: Обнаружение сенсорного просмотра и @ mplungjan post .

TheПриведенное выше решение основано на обнаружении поддержки событий без перехвата браузера * статья 1011.

Результаты можно проверить на следующей тестовой странице .

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

Вы также можете попробовать:

if (document.documentElement.ontouchmove) {
  // ...
}

, но он может не работать на устройствах iPhone.

Answer 2

Экстент jQuery support объект:

jQuery.support.touch = 'ontouchend' in document;

И теперь вы можете проверить его где угодно, например:

Answer 3

Когда подключена мышь, можно предположить, что с достаточно высокой скоростью передачи (я бы сказал, практически 100%), что пользователь перемещает мышь на минимальное расстояние после того, как страница готова - без какого-либо щелчка.Механизм ниже обнаруживает это.В случае обнаружения я рассматриваю это как признак отсутствия поддержки касания или, если поддерживается, незначительной важности при использовании мыши.Предполагается, что сенсорное устройство не обнаружено.

РЕДАКТИРОВАТЬ Этот подход может не подходить для всех целей.Он может использоваться для управления функциональностью, которая активируется на основе взаимодействия с пользователем на загруженной странице, например, в программе просмотра изображений.Приведенный ниже код также оставит событие mousemove привязанным к устройствам без мыши, как сейчас.Другие подходы могут быть лучше.

Грубо говоря, это выглядит так (извините за jQuery, но похоже на чистый Javascript):

var mousedown, first, second = false;
var ticks = 10;
$(document).on('mousemove', (function(e) {
    if(UI.mousechecked) return;
    if(!first) {
        first = e.pageX;
        return;
        }
    if(!second && ticks-- === 0) {
        second = e.pageX;
        $(document).off('mousemove'); // or bind it to somewhat else
        }
    if(first  && second  && first !== second && !mousedown){
        // set whatever flags you want
        UI.hasmouse = true;
        UI.touch = false;
        UI.mousechecked = true;
    }

    return;
}));
$(document).one('mousedown', (function(e) {
    mousedown = true;
    return;
}));
$(document).one('mouseup', (function(e) {
    mousedown = false;
    return;
}));

Answer 4

Краткое примечание для тех, у кого может возникнуть желание написать window.ontouchstart !== undefined ->, пожалуйста, используйте micnic ответ, так как undefined не является ключевым словом в JavaScript. Большая проблема, если разработка пишет что-то вроде:

undefined = window.ontouchstart;

Разработчик может сделать неопределенное все, что он хочет, и вы также можете проверить, если window.ontouchstart = myNonExistingWord;

Нет неуважения к тем, кто дал этот ответ: я уверен, что я написал это и в своем коде;)

Answer 5

Мне кажется, это пока работает нормально:

//Checks if a touch screen
is_touch_screen = 'ontouchstart' in document.documentElement;

if (is_touch_screen) {
  // Do something if a touch screen
}
else {
  // Not a touch screen (i.e. desktop)
}

Answer 6

Хотя это только в альфа-версии, jquery mobile Framework стоит проверить.Это нормализует эти типы событий в мобильных браузерах.Возможно, посмотрите, что они делают.Я предполагаю, что jquery-mobile.js отличается от этого фреймворка.