Докоснете събития - уеб API, MDN
Преводът не е завършен. Моля, помогнете с превода на тази статия от английски.
За да осигурят качествена поддръжка за потребителски интерфейс, базиран на докосване, събитията при докосване предлагат възможност за интерпретиране на въздействието на пръст (или стилус) върху сензорни екрани или тракболи.
Интерфейсите за събития при докосване са относително ниско ниво на API, което може да се използва за поддръжка на приложения със специфични взаимодействия с множество докосвания, като например жеста с два пръста. Взаимодействието с няколко докосвания се задейства, когато пръст (или стилус) за първи път докосне контактна повърхност. След това други пръсти могат да натискат повърхността и по желание да се движат по нея. Взаимодействието приключва, когато пръстите се отстранят от повърхността. По време на взаимодействие приложението получава събития на докосване в началото, по време и в края на фазите.
Събитията при докосване са подобни на събитията на мишката, с изключение на това, че поддържат едновременни докосвания и различни местоположения върху повърхността на докосване. Интерфейсът TouchEvent капсулира всички точки на допир, които са активни в момента. Интерфейсът за докосване, който представлява една точка за докосване, включва информация като позицията на точката за докосване спрямо прозореца за изглед на браузъра.
Дефиниции
Интерфейси
Създайте платно
Настройка на манипулатори на събития
След като страницата се зареди, функцията startup() по-долу трябва да бъде извикана в атрибута onload на елемента (в примера използваме бутон, за да я стартираме, поради ограниченията на системата за живи примери на MDN).
Проследяване на нови докосвания
Нека да разгледаме докосването в действие.
Когато възникне събитие touchstart, което показва ново докосване на повърхността, се извиква функцията handleStart(), обсъдена по-долу.
Той извиква event.preventDefault() къмза да попречи на браузъра да обработва събития с докосване (включително събития с мишката). След това получаваме контекста и изтегляме списъка с променени точки на допир от свойството TouchEvent.changedTouches на събитието.
След това итерираме всички Touch обекти в списъка, като ги добавяме към масива от активни точки на докосване и като начертаем началната точка за чертежа като малък кръг, използваме линия с дебелина 4px, като по този начин получаваме чист кръг с радиус 4px.
Рисуване като тангенциално движение
Всеки път, когато движението на един или повече пръсти се дефинира като събитие touchmove, което води до извикване на функцията handleMove().В този пример тази функция е отговорна за актуализирането на данните за докосване и изчертаването на линия от предишната позиция до текущата позиция на всяко докосване.
Този цикъл също итерира променени докосвания, но преглежда нашия масив от данни за докосване за предишни данни за всяко докосване, за да определи началната точка на всеки сегмент от линията, който да бъде начертан с докосването. Това се осъществява чрез проследяване на свойството Touch.identifier на всяко докосване. Това свойство е уникален номер за всяко докосване и остава постоянен през целия период на контакт на пръста с екрана.
Това ни позволява да получим координатите на предишната позиция на всяко докосване и да използваме подходящия контекстен метод, за да начертаем линеен сегмент, свързващ двете позиции заедно.
След като начертаем линията, извикваме Array.splice(), за да заменим предишните данни за точката на допир с текущата информация в масива ongoingTouches.
Докоснете Обработка на завършване
Когато потребителят махне пръста си от крана, събитието touchend се задейства. Ние го обработваме по същия начин: чрез извикване на функцията handleEnd(), коятопредставени по-долу. Нейната работа е да начертае последния сегмент от линията за всяко докосване, което е завършило, и да премахне точката на докосване от списъка с текущи докосвания.
Тя е много подобна на предишната функция; единствената разлика е, че рисуваме малък квадрат, за да маркираме края и че извикваме Array.splice(). Ние просто премахваме стари записи от списъка с текущи докосвания, без да добавяме актуализирана информация. Резултатът е краят на проследяването на точката на допир.
Боравене с неизвършени докосвания
Ако пръстът на потребителя се премести в интерфейса на браузъра или докосването трябва да бъде отменено, събитието touchcancel се изпраща и ние извикваме функцията handleCancel() по-долу.
Тъй като идеята е незабавно да прекратим докосването, ние просто го премахваме от текущия списък с докосвания, без да рисуваме последен сегмент от линията.
конвенционални функции
Този пример използва две удобни функции, които трябва да се разгледат накратко, за да направят останалата част от кода по-ясна.
Избор на цвят за всяко докосване
За да може всяко докосване да изглежда различно, функцията colorForTouch() се използва за избор на цвят въз основа на уникалния идентификатор на докосването. Този идентификатор е непрозрачно число, но можем поне да разчитаме, че той се различава между активните в момента докосвания.
Копиране на сензорен обект
Намиране на непрекъснато докосване
Функцията ongoingTouchIndexById() по-долу сканира през масива ongoingTouches, за да намери докосването, съответстващо на дадения идентификатор, след което връща индекса на това докосване в масива.
Показва какво се случва
Ако вашият браузър го поддържа, можете да го видите на живо.
Допълнителни съвети
Този раздел предоставя допълнителни съвети как да обработвате събития на докосване във вашето уеб приложение.
Боравенекликвания
Извикване на preventDefault() само при второ докосване
Една техника за предотвратяване на неща като pinchZoom на страница е извикването на preventDefault() при второто докосване в поредица. Това поведение не е добре дефинирано в спецификацията на събитията при докосване и води до различно поведение за различните браузъри (т.е. iOS ще предотврати мащабиране, но все още позволява панорамиране с двата пръста; Android ще позволи мащабиране, но не и панорамиране; Opera и Firefox понастоящем предотвратяват всяко панорамиране и мащабиране.) Понастоящем не се препоръчва да зависи от някакво конкретно поведение в този случай, а по-скоро да зависи от мета изгледа, за да предотврати мащабирането.
Спецификации
Коментар за състоянието на спецификацията| Touch Events – Ниво 2 Определение 'Touch' в тази спецификация. | Черновик | Добавени свойства radiusX, radiusY, rotationAngle, сила |
| Touch Events Определение 'Touch' в тази спецификация. | Рекомендация | Първоначално определение. |
Съвместимост с браузър
Функция Chrome Firefox (Gecko) Internet Explorer Opera Safari| Основна поддръжка | 22.0 | 18,0 (18,0) [1] | нет | нет | нет |
| Основна поддръжка | (Да) | (Да) | (Да) | 6,0 (6,0) | (Да) | 11 | (Да) | (Да) |
[1] Предпочитанието за три състояния dom.w3c_touch_events.enabled може да се използва за деактивиране (0), активиране (1) и автоматично откриване (2) на поддръжка за стандартни събития при докосване; по подразбиране те са на автоматично откриване (2).
Преди Gecko 12 (Firefox 12.0 / Thunderbird12.0 / SeaMonkey 2.9), Gecko не поддържаше мултитъч; отчетено е само едно докосване наведнъж.
От Gecko 24.0 (Firefox 24.0 / Thunderbird 24.0 / SeaMonkey 2.21), поддръжката на събития при докосване, въведена с Gecko 18.0 (Firefox 18.0 / Thunderbird 18.0 / SeaMonkey 2.15), е деактивирана в десктоп версията на Firefox (бага 888304), тъй като някои популярни сайтове, включително Google и Twitter, не работят правилно . След като грешката бъде коригирана, API ще бъде активиран отново. За да го активирате въпреки това, отворете about:config и задайте предпочитанието dom.w3c_touch_events.enabled на 2 . Мобилните версии, включително Firefox за Android и Firefox OS, не са засегнати от тази промяна. Освен това API е активиран във версията в стил Metro на Firefox за Windows 8.
Преди Gecko 6.0 (Firefox 6.0 / Thunderbird 6.0 / SeaMonkey 2.3), Gecko предлагаше патентован API за събития при докосване. Този API вече е отхвърлен; трябва да преминете към този.
Метки на документа и участници
Обнови се последен път: mdnwebdocs-bot, 18 мар. 2019 г., 16:55:13 ч
- Събития с докосване
- Ръководства
- Мултитъч взаимодействие[Перевести]
- Поддържа едновременно TouchEvent и MouseEvent[Перевести]
- Използване на събития при докосване[Перевести]
спасибо! Моля, проверете своята папка "Входящи" за потвърждаване на подписки.
Ако по-рано не потвърдихте подписката си в новината на Mozilla, това вероятно ще ви бъде направено. Моля, проверете папката Настоящо или Спам в своя пощенски ящик, за да видите, не е пристигнало ли от нас писмо.