Internet explorer 9-10-11 на Windows phone и обработчики touch событий

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