Браузеры
Оставьте ваше сообщение
Уважаемые пользователи! Мы будем рады ответить на ваши вопросы, получить ваши комментарии к материалам или принять предложения по тому, какие еще статьи будут вам полезны. Пожалуйста, заполните форму ниже.
Ваше имя*
E-mail (необязательно)
Ваше сообщение*
 

Мобильные браузеры - использование сенсора

Рекомендуем прочитать:

Исходная статья на английском языке: http://quirksmode.org/mobile/advisoryTouch.html

Когда пользователь касается сенсорного экрана телефона, должны происходить определенные события, позволяющие веб-разработчикам понять, что происходит и какие необходимо предпринять действия.

События могут быть разделены на три группы:

  • События касания, описывающие конкретные действия пользователя с экраном безотносительно к результату этих действий. Примеры: touchstart, touchmove, touchend (начало, движение, конец касания).
  • События интерфейса, описывающие результат касания. Примеры: click, resize, scroll, contextmenu (клик, масштабирование, прокрутка, контекстное меню).
  • Наследственные события, возникающие, потому что многие сайты зависят от их наличия. Примеры: mouseover, mousedown, mousemove, mouseup (позиция курсора мыши, нажатие, движение мыши, отпуск кнопки мыши).

 

Событиякасания

Верно: iPhone, Android

Отсутствует: Opera, S60 WebKit, Palm, Samsung, Firefox, MicroB, IE, BlackBerry, and NetFront

Все мобильные браузеры ОБЯЗАНЫ поддерживать события касания. Нет никаких исключений. Любой браузер, который к концу 2010 года не будет поддерживать их, выбывает из гонки.

Нужны ли нам отдельные события касания? Да, насколько я понимаю. Касание – новый способ взаимодействия, и для него нужны новые события.

Браузеры должны активно заимствовать модель построения событий касания iPhone. Нет причин не делать этого: она хорошо продумана и уже поддерживается лидерами рынка – iPhone и Android. Информацию о том, как работает эта система, можно найти здесь.

Эти события необходимы для стандартных функций интерфейса, таких как перетаскивание. Для устройств с сенсорным экран вполне естественно перетащить элемент с одного места на другое, и интернет-приложение – не исключение.

Если операционная система поддерживает мультисенсорный экран, браузеры должны также поддерживать события gesturestart, gesturechange и gestureend.

 

События интерфейса

Браузеры должны поддерживать следующие события интерфейса. Я пока не рассматриваю событие масштабирования, так как мне надо его лучше исследовать.

 

Прокрутка

Верно: iPhone, Android, Opera Widget Manager, S60 WebKit, MicroB, BlackBerry

Неверно: Opera

 

Отсутствует: Palm, Samsung, Firefox, IE, NetFront

Браузеры ДОЛЖНЫ выдавать событие прокрутки, когда пользователь ее производит. Довольно-таки очевидно.

Браузеры обычно выдают это событие во время масштабирования, и это нормально. Во время масштабирования всегда происходит прокрутка, так как линейки прокрутки меняют размер. Это и вызывает событие прокрутки.

 

Приближение

Верно: нет

Отсутствует: все

Браузеры ДОЛЖНЫ выдавать событие приближения, когда пользователь его производит любым способом, при помощи двух пальцев, двойного клика, кнопок и еще не изобретенных способов.

Событие приближения должно иметь некоторые свойства, дающие больше информации о приближении. Они, наверное, должны включать степень приближения, хотя я не считаю эту информацию особенно важной. Намного более важны эффективный размер экрана и положение курсора относительно экрана. Это все требует дальнейшего исследования.

В настоящий момент некоторые браузеры выдают событие масштабирования при приближении, но не все, и, кроме того, событие масштабирования может иметь другие назначения в мобильном устройстве. Мне следует провести дальнейшие исследования в этой области.

 

Клик

Хорошо: iPhone, Android, Palm, Maemo

Нормально: S60, Windows Mobile, BlackBerry

Плохо: Samsung Linux (H1)

Когда пользователь быстро касается ссылки или другого активного элемента, возникает событие клика. Это относится ко всем браузерам. Проблема – в правильном применении клика.

 

Определение: Событие клика происходит, если действия touchstart и touchend (начало и конец касания) происходят примерно в одном месте.

Вся проблема в этом “примерно”.

Границы, которые браузер устанавливает для движения пальца во время действия touchclick – основное мерило его пригодности к использовании с сенсорным экраном. Пользователи должны иметь небольшую свободу для ошибки, иначе интерфейс просто не будет работать.

Проблема в том, что различие между кликом и прокруткой обычно задается операционной системой, а не браузером.

 

Наследственные события

Полная поддержка: Android, Opera, MicroB, IE

Почти полная поддержка: iPhone, S60 WebKit

Нет mouseover: NetFront, BlackBerry

Нет mousemove: Palm, Samsung, Firefox, BlackBerry, NetFront

 

Модель работы с наследственными событиями мыши для браузеров в общих чертах уже разработана. Теоретически, их поддержка мобильными браузерами не требуется, так как телефоны с сенсорным экраном, очевидно, не имеют мыши. На самом деле, это невозможно, так как миллионы сайтов зависят от этих событий. Это неправильно, но что поделать.

Я предлагаю набор правил, которые в целом следуют установившейся практике:

  • При действии touchclick возникает событие клика, вызывающее наследственные события.
  • Эти события – mouseover, mousemove, mousedown, and mouseup. Они немедленно возникают в этом порядке.
  • Происходит только одно событие mousemove.
  • Если действие touchclick относится к новому элементу, для старого возникает событие mouseout (мышь покинула поле).
  • Нет поддержки события dblclick (двойной клик).
  • Стили :hover (проход курсора мыши над элементом) применяются, когда происходят действия touchstart или touchenter, и убираются, когда происходит touchleave или touchend.

 

На данный момент не все браузеры применяют эту схему. Обратитесь к таблицам совместимости для дальнейшей информации.

Правило для :hover – новое. Мне кажется, в этом есть смысл, хотя на данный момент ни один браузер его не поддерживает.

Думаю, событие клика должно происходить до наследственных событий. События интерфейса, такие как клик, более важны, чем наследственные события, что приводит к совершенно новой последовательности. Сейчас все браузеры выдают клик последним.

 

Предложения

В ходе своего исследования у меня появились некоторые идеи по расширению модели событий касания. Эти расширения ни в коем случае не обязательны (на самом деле, они мне пришли в голову только что), но было бы интересно увидеть хотя бы один пример их применения для того, чтобы можно было его протестировать.

 

Зона касания

Хорошо ли было бы описывать положение пальца не одним пикселем, а целой областью? Ведь на самом деле касание всегда покрывает несколько пикселей, и может быть полезно использовать эту информацию в JavaScript.

Например, ее можно использовать, чтобы определить, какие элементы накрываются при касании, а затем определить, на какой из них хотел нажать пользователь, рассматривая размер области пересечения элементов с пальцем.

Этот трюк особенно удачно сработает на старых системах, поскольку их интерфейс зачастую требует значительной доработки.

Если применять область касания, то должна ли она быть прямоугольной, с координатами вершин, или круговой, с центром и радиусом? По этому поводу я не уверен.

 

События touchenter и touchleave

Могут ли пригодиться события touchenter и touchleave (вход и выход касания)? Они могли бы быть оптимизированными под сенсорный экран копиями mouseenter и mouseleave (но не mouseover и mouseout)

 

 

Я понимаю, что это может изменить текущее положение вещей, когда цель касания сохраняется в независимости от того, покидает ли касание элемент. Мне кажется, это не такая плохая идея. Касание элемента изначально и перемещение на него касания  - разные действия.

Эти события не должны приводить к разворачиванию элемента. Разворачивание  делает mouseover и mouseout неприменимыми. Нам не следует переносить этот недостаток на новую платформу. Вместо этого нам следует воспользоваться опытом Microsoft и вызывать события touchenter и touchleave только когда касание попадает или исчезает с элемента, на котором оно определено.

Событие touchhold

Наконец, может пригодиться событие touchhold (удержание касания). Оно возникает, когда пользователь касается экрана и удерживает палец на нем. В некоторых браузерах появляются контекстные меню, а в некоторых этого не происходит. Разработчикам может быть интересно эта возможность выведения меню, так как touchhold – наилучшее приближение к правому клику.

Кто будет определять, что составляет touchhold? Для браузеров обязательно понадобятся правила вроде “если за событием touchhold не следует другого события касания в течение нескольких секунд”, но разработчики неизбежно начнут жаловаться, что на данной конкретной платформе надо ждать слишком мало или слишком долго. Имеет ли смысл дать им возможность устанавливать это время?

Из всех предложенных событий touchhold наиболее просто для работы с JavaScript. Описанная здесь логика программируется довольно легко. Так что это событие может быть более интересно для создателей библиотек, чем для продавцов браузеров.

Вернуться на главную страницу

Подпишитесь на рассылку новых материалов:

Комментарии:

Полезный дачный мусор: эффективное использование

20.09.2014

Полезный дачный мусор: эффективное использование

Мусор на даче всегда является помехой, тем более в осенний период, когда хочется убрать дачу и оставить ее чистой до весны. Но разнообразный хлам не т...

Строительная выставка в Симферополе «Крым. Стройиндустрия. Энергосбережение. Осень-2014»

19.09.2014

Строительная выставка в Симферополе «Крым. Стройиндустрия. Энергосбережение. Осень-2014»

С 23 по 25 октября 2014 года в Симферополе по адресу ул. Киевская, 115, ДКП проводится 24-я межрегиональная специализированная выставка «Кр...

Проблема грунтовых вод на даче

18.09.2014

Проблема грунтовых вод на даче

Мы довольно часто вспоминаем о грунтовых водах, когда они мешают строительству или губят растения на даче. Но намного правильнее разобраться с проблем...

Причины увядания скумпии кожевенной

16.09.2014

Причины увядания скумпии кожевенной

Вопрос: "Здравствуйте! Весной посадила молодой куст скумпии кожевенной. Кустик быстро прижился на новом месте. Заметно подрос. К осени листья стали пр...

Как хранить овощи на даче (картофель, морковь, свекла)

14.09.2014

Как хранить овощи на даче (картофель, морковь, свекла)

В этом сезоне мы уделили время строительству и обустройству специальных хранилищ для овощей и фруктов, и поговорили о погребах и кладовках на даче. Та...

Ящики для дачи и их использование

12.09.2014

Ящики для дачи и их использование

Ящики – специальная тара, которая может быть использована для хранения или транспортировки чего-либо. Именно этого нам и не хватает на даче, что...

Утепление пола в гараже на даче

10.09.2014

Утепление пола в гараже на даче

Утепление пола в гараже многие считают необязательном процессом, но ведь именно через пол внутрь гаража поступает огромное количество холода зимой и о...

Подготовка к зиме на даче: полезные советы

08.09.2014

Подготовка к зиме на даче: полезные советы

О зиме говорить никогда не поздно, ведь данный период переносится дачей достаточно сложно. Поэтому, с приближением холодного времени года, мы начинаем...

Как обустроить рабочее место в гараже

06.09.2014

Как обустроить рабочее место в гараже

У каждого дачника предостаточно забот, и в осеннее время их не меньше. Но тут возникает и дополнительная сложность – холодная и сырая погода. По...

Как использовать сыпучие материалы на даче

03.09.2014

Как использовать сыпучие материалы на даче

Дачные работы заставляют нас задумываться о подходящих строительных материалах, и лучше это сделать заранее, чем во время срочной стройки или оформлен...

Выставка "Зеленая неделя", осень 2014, Волгоград

02.09.2014

Выставка "Зеленая неделя", осень 2014, Волгоград

Волгоградский Выставочный Центр «Регион» приглашает Вас принять участие в XVIII специализированной выставке ландшафтного дизайна, садово-п...

Правильные условия хранения овощей и фруктов

30.08.2014

Правильные условия хранения овощей и фруктов

Условия хранения овощей и фруктов в дачных хранилищах очень строгие, и поэтому соблюдать их требуется по максимуму. Относится это к самим помещениям, ...

Прогулки по саду наших читателей: сад Любови Тепловой

29.08.2014

Прогулки по саду наших читателей: сад Любови Тепловой

Как и обещали, DachaDecor.ru, представляет Вашему вниманию сад одной из наших постоянных посетительниц сайта, которая любит красоту и природу, следит ...

Отсыпка участка перед озеленением

28.08.2014

Отсыпка участка перед озеленением

Вопрос: "Подскажите, пожалуйста, что сделать с участком перед началом озеленения. В настоящий момент была сделана вырубка леса, торфяник, местность &n...

Где хранить овощи и фрукты на даче

26.08.2014

Где хранить овощи и фрукты на даче

С самого начала лета мы собираем урожай с сада и огорода на собственной даче. Многие плоды употребляются сразу, в сыром виде, некоторые консервируются...

Профессиональные садоводы и красноярские дачники, желающие «похвастаться» урожаем, соберутся на ярма…

25.08.2014

Профессиональные садоводы и красноярские дачники, желающие «похвастаться» урожаем, соберутся на ярмарке «Осень на даче»

С 18 по 21 сентября в Красноярске в МВДЦ «Сибирь» пройдет выставка-ярмарка «Осень на даче». Проект, посвященный закрытию дачно...