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