Возможности адаптивной обработки ввода

Модель событий указателя в Internet Explorer 10 — благодаря записи в единый набор событий — обеспечивает удобную обработку ввода с помощью мыши и пера, а также сенсорного и мультисенсорного ввода. Как и события мыши, события указателя возникают при нажатии, перемещении, отпускании, наведении и убирании любого из указателей. Основная поддержка сенсорного ввода для большинства сайтов должна работать, не требуя изменений, по следующим причинам.

  • Internet Explorer 10 по умолчанию обеспечивает стандартную обработку базовых сенсорных взаимодействий, таких как сдвиг для областей прокрутки, двойное касание и сжатие, выбор касанием и вызов контекстного меню с помощью нажатия и удерживания. Эти действия обрабатываются автоматически, поэтому на сайтах и в приложениях пользователи могут наслаждаться возможностями сенсорного управления по умолчанию.
  • После создания событий указателя Internet Explorer 10 создает также события мыши для основного контакта (например, для первой точки касания на экране). Это сохраняет работоспособность существующих веб-сайтов, ориентированных на управление с помощью мыши.

Дополнительные сведения об основных стратегиях разработки сайтов, поддерживающих сенсорный ввод, и диагностике см. в разделе Краткое руководство: оптимизация сайта для сенсорного ввода. В этой статье описаны предусмотренные в Internet Explorer 10 возможности адаптивного ввода, с помощью которых вы сможете, сохранив поддержку ввода с помощью мыши и клавиатуры, оптимизировать ваш сайт для сенсорного ввода.

Определение поддержки сенсорного ввода

Internet Explorer 10 предоставляет свойство msMaxTouchPoints, которое помогает определить, поддерживает ли клиент сенсорный и мультисенсорный аппаратный ввод:


if (navigator.msMaxTouchPoints > 1) {
  // Supports multi-touch
}

Для определения сенсорных возможностей на сервере Internet Explorer 10 предоставляет маркер строки агента пользователя "Touch". После подтверждения поддержки сенсорного взаимодействия вы можете проверить pointerType события MSPointerDown, чтобы определить, использует ли пользователь сенсорный ввод:


element.addEventListener("MSPointerDown",handleDown,false);
function handleDown(event) {
  if(event.pointerType == event.MSPOINTER_TYPE_TOUCH) {
    // Do something for touch input only
  }else{
    // Do something for non-touch input
  }
}

Моделирование наведения мыши для сенсорного ввода

Просмотр веб-страниц с использованием сенсорного управления не предполагает наведения курсора на элементы веб-страниц. Поэтому действия и содержимое, активируемые наведением, могут стать недоступными при сенсорном вводе. Типичным примером этой проблемы являются подменю, активируемые при наведении. Во избежание данной проблемы рекомендуется не использовать наведение указателя для скрытия содержимого, с которым пользователь может взаимодействовать. Вместо этого рассмотрите возможность использовать для переключения видимости событие onclick. В качестве альтернативы в Internet Explorer 10 добавлена новая реакция на событие для существующего свойства aria-haspopup, чтобы можно было моделировать наведение указателя на элементы страницы со скрытым интерактивным содержимым:


<style type="text/css">
#menu .cssSubMenu {
  display: none;
}
#menu:hover .cssSubMenu {
  display: block;
}
</style>

...
<div id="menu" aria-haspopup="true">
  <a>CSS Hover Menu</a>
    <div aria-haspopup="false" class="cssSubMenu">
      <a>Sub menu item 1</a> </div>
    <div aria-haspopup="false" class="cssSubMenu">
      <a>Sub menu item 2</a> </div>
    <div aria-haspopup="false" class="cssSubMenu">
      <a class="cssSubLink">Sub menu item 3</a> </div>
</div>


Дополнительно см. Использование свойства aria-haspopup для моделирования наведения указателя на устройствах с поддержкой сенсорного ввода.

Определение и переопределение реакций на события сенсорного ввода

По умолчанию Internet Explorer 10 использует касание с перемещением, сжатие и двойное касание и не создает события для этих действий. Чтобы переопределить эти значения по умолчанию и указать допустимые реакции на события сенсорного ввода для вашего сайта, вы можете использовать свойство каскадных таблиц стилей (CSS) -ms-touch-action . Возможные значения приведены в таблице.

ЗначениеОписание

auto

Начальное значение Браузер определяет реакцию на событие для элемента.

none

Элемент не допускает никаких реакций на события сенсорного ввода по умолчанию.

pan-x

Элемент допускает сенсорное панорамирование по горизонтали.

pan-y

Элемент допускает сенсорное панорамирование по вертикали.

pinch-zoom

Элемент допускает масштабирование сжатием.

manipulation

Элемент допускает сенсорное панорамирование и масштабирование сжатием. (Сокращение от "pan-x pan-y pinch-zoom".)

double-tap-zoom

Элемент допускает масштабирование двойным касанием.

inherit

Элемент наследует значение -ms-touch-action от родительского элемента.

 

Для точного управления масштабированием и панорамированием или прокруткой элементов с поддержкой сенсорного ввода существует несколько новых свойств, которые позволят вам, например, устанавливать для масштабирования и прокрутки ограничения и точки прикрепления, а также закреплять ось панорамирования или разрешать свободное панорамирование. Для определения выделяемых элементов страницы можно использовать свойство -ms-user-select, универсальное для всех типов ввода.

Руководство разработчика Панорамирование и масштабирование, Указание выделяемого текста
ОбразцыОбразец сенсорного ввода: прокрутка, панорамирование и масштабирование, Образец пользовательского выбора для CSS
Ссылки Сенсорный ввод: масштабирование и панорамирование, -ms-user-select

 

Модель событий указателя

Internet Explorer 10 предоставляет модель событий указателя, с помощью которой вы можете легко обрабатывать события ввода при помощью мыши и пера, а также сенсорного и мультисенсорного ввода в абстрактной форме, называемой указатель. События ввода с помощью универсального указателя и свойства этих событий очень напоминают события для мыши (например, нажатие, перемещение, отпускание, наведение и убирание), но они улучшены с учетом других форм ввода, а также к ним добавлены множественные указатели. Советы по обработке мультисенсорного ввода и ввода с помощью мыши в других браузерах вы найдете в блоге IEBlog.

Наглядная схема модели событий указателя: три шарика ("Pen", "Touch" и "Mouse") попадают в воронку и покидают ее в форме "Pointer"
Руководство разработчика События указателя и жестов
Демоверсии Эффекты касания, Поймай птицу, В воздухе витает любовь, Весна в Ирландии
Пример Использование полотна, SVG и мультисенсорной технологии для создания игры-головоломки на основе плиток
Ссылки События

 

Модель событий жестов

Для более полного использования сенсорных возможностей в Internet Explorer 10 предусмотрена модель событий жестов, в которой возможны более сложные взаимодействия с пользователем.

Руководство разработчика События указателя и жестов
ДемоверсииПоверхность браузера, Эффекты касания, Поймай птицу, В воздухе витает любовь, Весна в Ирландии
Пример Использование полотна, SVG и мультисенсорной технологии для создания игры-головоломки на основе плиток
Ссылки События

 

Формы HTML5 с поддержкой сенсорного ввода

В Internet Explorer 10 вводится поддержка элементов управления для ввода HTML5, оптимизированных для сенсорного ввода. Вот лишь некоторые дополнительные возможности сенсорного ввода:

  • Выделенный элемент управления сопровождает все параметры, обеспечивая непрерывную прокрутку.
  • Для полей текстового ввода есть кнопка очищения поля.
  • Прокручиваемые вложенные зоны страницы поддерживают сенсорное управление.
  • Управление диапазоном обеспечивает непрерывную обратную связь с выделенным значением.
  • Кнопки и ссылки поддерживают отмену щелчка путем смещения указателя с цели.
  • Переключатели и флажки можно легко выбрать при помощи касания; их также можно активировать касанием подписи.
  • Подсказки крупнее и располагаются дальше при касании ссылки, чем при щелчке мышью.

Текстовый ввод можно сделать для пользователя еще удобнее, указав конкретные типы ввода, например адрес электронной почты, телефон или URL-адрес—. Тогда Internet Explorer 10 отобразит специальную раскладку сенсорной клавиатуры для данного типа ввода в Windows 8.

Руководство разработчика Формы HTML5
ДемоверсииTouch First Controls
ОбразцыПример элементов управления формы

 

Связанные разделы

Адаптивные веб-сайты
Возможности создания адаптивного макета

 

 

Показ:
© 2014 Microsoft