Докоснете събития в javascript, мултитъч
Разработвайки приложения за Android и iPhone с iPad (IOS), използвайки само уеб технологии, рано или късно всеки разработчик се сблъсква с въпроса за внедряването и използването на сложни мултитъч действия в своята игра или приложение, като плъзгане, притискане, както и обработка на дълго натискане (дълго докосване с един пръст без движение) и плъзгане.
В тази статия ще разгледаме начини за обработка на събития с докосване с различна сложност в Javascript Events, без библиотеки на трети страни (просто вземете jQuery min).
Веднага ще направя резервация, че ще използвам само jQuery, за да деактивирам поведението на браузъра по подразбиране за събитие. Не ми харесва тази библиотека, така че всичко ще бъде написано на Vanilla JS.
И така, ще започнем с теория и всъщност ще засегнем кои събития трябва да се използват при създаването на приложение или игра.
Използват се общо 3 ключови събития:
тъчстарт - Докосна екрана
докосване - Пръстът беше отстранен
touchmove - Преместете пръста си
Ако за да се получи елементът, върху който мишката се е преместила или се е преместила, е било достатъчно да извикате event.target, то с докосване на събития всичко не е толкова просто.
Всяко докосване трябва да бъде идентифицирано. И за това се използват списъци:
докосва - Всички пръсти, които в момента взаимодействат с екрана („докоснаха“ екрана)
targetTouches - Списък на пръстите, които взаимодействат с елемента
changeTouches - Списък на пръстите, които участват в текущото събитие. Ако например това събитие е touchend, тогава списъкът ще съдържа пръста, който е бил премахнат (Дори ако останалите 4 пръста са все още на екрана).
За да бъде по-лесно за разбиране, ето ситуацията:
Поставям един пръст на екрана и всичките 3 списъка имат по един елемент.
Слагам втория пръст и сега touchs има 2 елемента, targetTouches ще има 2 елемента, ако поставя втория пръст на същия HTML елемент като първия, а changeTouches от своя страна ще има само втория пръст, тъй като беше той който е причинил събитието.
Ако поставя 2 пръста на екрана наведнъж, а след това TouchTouch ще има 2 елемента (всеки на пръст).
Ако започна да движа пръстите си по екрана, само списъкът с променени докосвания ще се свие. Броят на елементите, които ще съдържа, ще бъде равен на броя на пръстите, участващи в движението (поне 1).
Ако повдигна пръста си, списъците с докосвания, целеви докосвания са празни от един елемент и променените докосвания ще съдържат пръста, тъй като той е задействал събитието (докосване)
Когато премахна последния пръст, списъците с докосвания, целеви докосвания няма да съдържат нищо, а променените докосвания ще имат информация за този пръст.
Сега е време да разберем каква точно информация можем да получим за пръста:
идентификатор - Уникален Touch ID
цел - Самият обект, до който се докоснахме
PageX, PageY - Докоснете координатите на страницата
Можете да видите уникалния идентификатор на едно докосване, като извикате event.touches [0] .identifier, а на IOS, ако не се лъжа, трябва да го направите event.originalEvent.touches [0] .identifier.
Е, на какво вече ви научих и сега е моментът да преминете към практиката.
Преди да започнем, има няколко неща, които трябва да научите. Във всяка игра, приложение, което ще направите на Android и IOS, трябва да деактивирате стандартната реакция на компонента WebView на събития. За това свързахме jQuery (не можах да направя в Pure JS какво правят функциите event.preventDefault () и event.stopPropagation ()).
Така че трябва да поставите следното във вашия JS код:
document.addEventListener ('touchstart', функция (събитие) event.preventDefault ();
event.stopPropagation ();
/ * Вашият код за обработка на събития тук * /
>, невярно);
document.addEventListener ('touchmove', функция (събитие) event.preventDefault ();
event.stopPropagation ();
/ * Вашият код за обработка на събития тук * /