Как проверить браузер на поддержку сенсорного запуска с помощью 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 .