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

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

Каков наилучший способ сделать это?

Ответ 1

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

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

Посмотрите на эту статью:

Обнаружение поддержки событий без взлома браузера

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

Ответ 2

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

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

var supportsTouch = false;
if ('ontouchstart' in window) {
    //iOS & android
    supportsTouch = true;
} else if(window.navigator.msPointerEnabled) {
    //Win8
    supportsTouch = true;
}

Ответ 3

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

Ответ 4

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