Обработка на събития на сензорен екран в JavaScript
Нека започнем с най-простото - завъртане на екрана. Когато екранът се завърти, събитието onorientationchange се предава на обекта прозорец. В манипулатора на събития се проверяват стойностите на clientWidth и clientHeight и въз основа на тяхното съотношение се определя вертикалната или хоризонталната позиция на екрана. Използването на тези стойности ви позволява да се отървете от специфичните за браузъра стойности на типа screen.orientation. За максимална поддръжка на различни браузъри манипулаторът за ротация трябва да бъде дублиран от манипулатора на събитието onresize - преоразмеряване на прозореца на браузъра.
Докосването на екрана, отпускането и превъртането генерират няколко събития от типа TouchEvent, а именно ontouchstart - натискане (пръстът докосна екрана), ontouchmove - преместване на натискането, ontouchend - завършване на натискането (пръстът се отстранява от екрана). В зависимост от поставената задача трябва да внедрим необходимите манипулатори. Но преди това малко теория. Всички изброени събития имат следните свойства:
TouchEvent object propertyDescriptiontouchesAll clickstargetTouchesAll clicks within the element where changesedTouches event occurred Променени докосвания от последното докосване (това е полезно в ontouchmove и ontouchend манипулатори, както и за филтриране на нови и освободени докосвания) Всяка от трите изброени колекции от Touch свойства на свой ред има свойства, които могат точно да проследяват координатите на докосването и елементите на уеб страницата, на които са извършени тези докосвания .
Свойство на обект TouchDescriptionclientX, clientYClick координати спрямо видимата област на браузъра screenX, screenYClick координати спрямо границите на екранаpageX, pageYClick координати спрямо границите на уеб страницата, включително вертикално и хоризонтално превъртане positionidentifierNumericидентификатор на щракване, за да го проследите между събития targetЕлемент на уеб страница, в който е възникнало събитието Манипулаторът на събитието е обвързан с целия документ или с конкретен елемент на уеб страница, който трябва да отговаря за взаимодействието със сензорния екран. Например лента за превъртане или област със съдържание, което може да се превърта.
Така могат да се проследяват както многократни, така и единични кликвания. В последния случай не е необходимо да се обхожда целия масив, достатъчно е да се получат координатите само на обекта с нулев индекс.
Следващото действие е плъзгане на обекти. Ако на стационарни компютри беше доста трудно да се приложи, тогава на мобилни устройства със сензорни екрани плъзгането и пускането на елементи от уеб страницата се изпълнява само с няколко реда код. Всичко се основава на събитието ontouchmove.
Събитието ontouchend се използва за проследяване кога пръстът е освободен. В този манипулатор можете да проследите кои кликвания са се променили и да извършите съответните действия.
Е, последното за днес - страниране. Това е комбинирано събитие, което започва с натискане и завършва с изместване на натискане наляво или надясно на определено разстояние. За да определите разстоянието при първоначалното щракване, трябва да запазите координатите на събитието и в манипулатора на движение да следите разликата между текущите и запазените координати на щракването. Веднага щом разликата надхвърли определена стойност, събитието за пейджинг може да се счита за завършено. Посоката на пейджинг се определя от това дали текущите записани координати са по-големи или по-малки.
Естествено, посоката на страниране може да бъде не само хоризонтална, но и вертикална и дори диагонална. За да направите това, достатъчно е просто да следите необходимите вертикални координати и / илихоризонтална.
На демонстрационната страница можете да видите всички описани действия: обработка на завъртане на екрана, плъзгане на елементи, мултитъч и плъзгане. Трябва да видите страницата от мобилни устройства, нищо няма да работи на стационарни компютри.