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

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

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

49
iphone javascript jquery mobile unobtrusive-javascript

4 ответов

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

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

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

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

85

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

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

}
11

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

3

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

1