Как проверить браузер на поддержку touchstart с помощью JS/jQuery?

Пытаясь следовать рекомендациям, мы пытаемся использовать правильные события JavaScript/jQuery в зависимости от того, какое устройство вы используете. Например, мы создаем мобильный сайт с тегом, который будет иметь событие onclick или touch. В случае с iPhone мы хотели бы использовать событие «touchstart». Мы хотели бы проверить, поддерживает ли их устройство «touchstart», прежде чем мы привяжем этот обработчик к объекту. Если это не так, то вместо этого мы привяжем «onclick».

Как лучше всего это сделать?


iphone mobile javascript jquery unobtrusive-javascript
person Alex    schedule 26.05.2010    source источник

Ответы (4)


arrow_upward
97
arrow_downward

Вы можете определить, поддерживается ли событие:

if ('ontouchstart' in document.documentElement) {
  //...
}

Взгляните на эту статью:

Опубликованная там функция isEventSupported действительно хороша для обнаружения самых разных событий, и она кроссбраузерна.

person Christian C. Salvadó    schedule 26.05.2010
comment
У меня есть соблазн поставить +1, но я знаю, что Firefox вернет здесь false по неправильным причинам. Firefox возвращает false для всех событий, проверенных таким образом (я знаю, это одна из тех редких ситуаций, когда Fx отстой). Тем не менее, в статье говорится об этом, так что вы получаете +1 ;-) - person Andy E; 26.05.2010
comment
отличный ресурс. Спасибо за быструю помощь! - person Alex; 27.05.2010
comment
Это только определяет, поддерживает ли браузер сенсорные события, но не определяет, поддерживает ли их устройство. Попробуйте это в Chrome на устройстве без сенсорного экрана. - person RobG; 14.08.2012
comment
Это то же самое, что и document.documentElement.hasOwnProperty('ontouchstart')? - person Jondlm; 20.09.2013
comment
@Andy E: Похоже, сейчас работает. Firefox версии 18.0.0.4752, по-видимому, поддерживает это после тестирования с ontouchstart (false) и onclick (true) на моем рабочем столе. - person abelito; 18.11.2013
comment
@RobG Я запустил это в Chrome 35.0.1916.153 m на ноутбуке без сенсорного экрана и получил false, как и ожидалось. Я что-то упускаю? - person Nick; 30.06.2014
comment
Будьте осторожны при переводе "ontouchstart" in document.documentElement в coffeescript, он не будет работать должным образом, потому что оператор in имеет другую семантику. Вместо того, чтобы выяснять, как это сделать в coffeescript, я просто обвел его обратными кавычками, и это сработало, используя выражение javascript. - person Kevin Bullaughey; 11.06.2015
comment
Есть ли аналогичный способ обнаружения API событий указателя? в основном браузер сафари не поддерживается - person Akin Hwan; 06.06.2019

arrow_upward
12
arrow_downward

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

Также работает для Windows 8 IE10, который использует событие «MSPointerDown» вместо «touchmove».

var supportsTouch = false;
if ('ontouchstart' in window) {
    //iOS & android
    supportsTouch = true;

} else if(window.navigator.msPointerEnabled) {

    // Windows
    // To test for touch capable hardware 
    if(navigator.msMaxTouchPoints) {
        supportsTouch = true;
    }

}
person George Filippakos    schedule 14.01.2013
comment
Почему бы не упростить его как однострочный? var supportsTouch = ('ontouchstart' in window || window.navigator.msPointerEnabled) - person Michael Lumbroso; 10.01.2017
comment
К сожалению, это не работает для меня, т.е. 11 на Windows 10 на ноутбуке HP (без сенсорного экрана). Он неправильно говорит, что supportsTouch = true. но когда я привязываю что-то к touchstart, оно никогда не выполняется. Как-нибудь обойти это? - person Swiss Mister; 09.02.2017
comment
Это неправильно. Pointers API применяется не только к сенсорным устройствам. Это относится практически к каждому устройству ввода. - person Nilpo; 18.02.2018
comment
Измененный ответ для проверки msMaxTouchPoints (тесты для сенсорной поддержки) - person George Filippakos; 19.02.2018

arrow_upward
3
arrow_downward

Вы можете проверить, если typeof document.body.ontouchstart == "undefined" вернуться к обычным событиям dom

person antimatter15    schedule 26.05.2010

arrow_upward
1
arrow_downward

Я сделал полную демонстрацию, которая работает в каждом браузере с полным исходным кодом решения этой проблемы: Обнаружение устройств с сенсорным экраном в Javascript.

person Manuel Ignacio López Quintero    schedule 12.05.2011
comment
Ваш пример дает много ложных срабатываний. Есть много браузеров, которые реализуют Touch API по умолчанию, независимо от того, действительно ли сенсорные устройства подключены к системе. - person Nilpo; 18.02.2018
comment
@Nilpo Возможно, ты прав. Этот пост был написан более семи лет назад. - person Manuel Ignacio López Quintero; 02.03.2018