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

Question

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

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

Answer 1

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

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

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

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

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

Answer 2

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

Также работает для 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;
    }

}

Answer 3

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

Answer 4

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