Опубликовано автор в категориях Верстальщику.

Когда вы верстаете сайт оптимизированный под просмотр в разных мобильных устройствах с поддержкой JavaScript Touch events, вам нужно обязательно помнить, что сегодня помимо нормальных устройств с Android, iOS есть еще и Windows phone. И если в 8 версии установлен IE 10, с которым можно хоть что-то сделать, то IE 9 on Windows phone — это… Здесь можно продолжать и написать много нелестного.

Итак, согласно спецификации http://www.w3.org/TR/touch-events/ существует такой список touch событий:

  • touchstart
  • touchmove
  • touchend
  • touchcancel

Мобильные версии IE9 равно как и IE 10 не поддерживают стандартные обработчики touch событий. С IE 9 ситуация вообще критическая, а для 10 версии под Windows Phone 8 вы можете написать кастомный код, используя вендорные обработчики:

  • MSPointerDown
  • MSPointerMove
  • MSPointerUp
  • MSPointerOut

Следует сказать что уже вышла 11 версия сказочного браузера, но даже в нем нет нативной поддержки стандартных типов событий, там ограничились лишь только тем, что убрали вендорные префиксы из обработчиков pointerEvent и теперь их можно использовать так:

  • PointerDown
  • PointerMove
  • PointerUp
  • PointerOut

В итоге, чтобы добавить обработчики touch событий вам нужно написать нечто вроде:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
if(window.navigator.pointerEnabled) {
// IE 11
    this.element.addEventListener("pointerDown", eventHandlerName, false);
    this.element.addEventListener("pointerMove", eventHandlerName, false);
    this.element.addEventListener("pointerUp", eventHandlerName, false);
} else if (window.navigator.msPointerEnabled) {
// IE 10
    this.element.addEventListener("MSPointerDown", eventHandlerName, false);
    this.element.addEventListener("MSPointerMove", eventHandlerName, false);
    this.element.addEventListener("MSPointerUp", eventHandlerName, false);
} else {
// Android, iOS, othere
    this.element.addEventListener("touchstart", eventHandlerName, false);
    this.element.addEventListener("touchmove", eventHandlerName, false);
    this.element.addEventListener("touchend", eventHandlerName, false);
}

Вот такая-вот история. На этом все. Надеюсь пост будет вам полезен. Ну и напоследок полезная ссылочка для проверки поддержки различных современных свойств HTML 5 в разных устройствах http://mobilehtml5.org/.

Оставить комментарий

  • (не будет показан)