Кроссверсионная обработка touch-событий в Internet Explorer на Windows Phone
Согласно спецификации Touch Events существует всего четыре типа события:
- touchstart
- touchend
- touchmove
- touchcancel
Но и тут Internet Explorer отличился. Если IE11 хоть как-то стал следовать стандартам и рекомендациям W3C, то с IE9, IE10 еще хуже.
В них без вендорных префиксов не обойтись, да и названия самих событий отличаются:
| Браузер | touchstart | touchend | touchmove | touchcancel |
|---|---|---|---|---|
| IE9 | MSPointerDown | MSPointerUp | MSPointerMove | MSPointerCancel |
| IE10 | MSPointerDown | MSPointerUp | MSPointerMove | MSPointerCancel |
| IE11 | pointerDown | pointerUp | pointerMove | pointerCancel |
Соответственно, для кроссверсионной поддержки данных событий нужно написать нечто подобное:
if(window.navigator.pointerEnabled) {
// IE 11
this.element.addEventListener("pointerDown", eventHandlerName, false);
this.element.addEventListener("pointerMove", eventHandlerName, false);
this.element.addEventListener("pointerUp", eventHandlerName, false);
this.element.addEventListener("pointerCancel", 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);
this.element.addEventListener("MSPointerCancel", eventHandlerName, false);
} else {
// Android, iOS и другие
this.element.addEventListener("touchstart", eventHandlerName, false);
this.element.addEventListener("touchmove", eventHandlerName, false);
this.element.addEventListener("touchend", eventHandlerName, false);
this.element.addEventListener("touchcancel", eventHandlerName, false);
}
Ссылки
- Спецификация Touch Events
- Спецификация Pointer Events
- События указателя и жестов в Internet Explorer 10
- Adapting your WebKit-optimized site for Internet Explorer 10
- Internet explorer 9-10-11 на Windows phone и обработчики touch событий
Почитал бы хоть про отличие pointer от touch. Совершенно другие события. Да и названия по стандарту в lower case
К сожалению, прочитал) Вопрос был в соотношению двух спецификаций в одно более-менее работающее решение. Lower Case чего? По ссылкам под статьей посмотрите официальные мануалы вендоров.
http://www.w3.org/TR/pointerevents/#the-pointerover-event
pointerdown, а не pointerDown. Да и window.navigator.pointerEnabled уже был удален из спецификации.
Но это конечно придирки.
Все равно поведение разное — если нажать на элемент и вывести указатель за пределы, то в touch при отпускания пальца за пределами элемента поступит событие «touchend». В pointer такое поведение только при помощи capture можно воспроизвести.