Верх страницы
Обложка к записи Кроссверсионная обработка touch-событий в Internet Explorer на Windows Phone
Время для прочтения: 0 мин. 15 сек.

Кроссверсионная обработка 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);
}

Ссылки

Автор: Кобзарёв Михаил

Русский разработчик с 20-ти летним стажем. Работаю с PHP, ООП, JavaScript, Git, WordPress, Битрикс, Joomla, Drupal, Opencart, DLE, Laravel, Moonshine, SuiteCRM.

Оптимизирую сайты под Google Page Speed, настраиваю импорты для больших магазинов на WooCommerce + WP All Import. Пишу плагины на заказ. Все мои услуги.

Веду блог о разработке, дайджест в телеграмме и в ВК.

Вы всегда можете нанять меня.

Комментарии
Подписаться
Уведомить о
guest

3 комментариев
Межтекстовые Отзывы
Посмотреть все комментарии
Всеволод Шмыров
Всеволод Шмыров
8 лет назад

Почитал бы хоть про отличие pointer от touch. Совершенно другие события. Да и названия по стандарту в lower case

mihdan
8 лет назад
Ответить на  Всеволод Шмыров

К сожалению, прочитал) Вопрос был в соотношению двух спецификаций в одно более-менее работающее решение. Lower Case чего? По ссылкам под статьей посмотрите официальные мануалы вендоров.

Всеволод Шмыров
Всеволод Шмыров
8 лет назад
Ответить на  mihdan

http://www.w3.org/TR/pointerevents/#the-pointerover-event

pointerdown, а не pointerDown. Да и window.navigator.pointerEnabled уже был удален из спецификации.

Но это конечно придирки.

Все равно поведение разное — если нажать на элемент и вывести указатель за пределы, то в touch при отпускания пальца за пределами элемента поступит событие «touchend». В pointer такое поведение только при помощи capture можно воспроизвести.

Предыдущая запись
Следующая запись

Давайте дружить
в Телеграме

Авторский блог вашего покорного слуги в Telegram про web, программирование, алгоритмы, инструменты разработчика, WordPress, Joomla, Opencart, Laravel, Moonshine, фильмы и сериалы