На сьогоднішній день пристрої з сенсорним екраном перестали бути рідкістю. До них можна віднести мобільні телефони, планшети, термінали і не тільки. У зв’язку з цим для роботи з такими пристроями в Javascript використовуються спеціальні події, на які слід виконувати які-небудь дії, скажімо, це може бути «swipe» (подоба перегортання), або що-небудь ще. У цьому пості, я вирішив трохи описати, які є події, і як з ними можна працювати. Корисним буде і розуміння принципів роботи подій з традиційним курсором на комп’ютерах. Ви готові? Поїхали.
Насамперед, давайте розглянемо список подій і їх опис. Для цього в зручному вигляді допоможе вам ця таблиця.
| touchstart | Подія спрацьовує при виникненні дотику до елементу. |
| touchmove | Подія виникає після того, як користувач доторкнувся до елементу, і переміщує палець в іншу точку. |
| touchend | Подія виникає після розриву дотику до елементу. |
| touchenter | Подія виникає за умови, що дотик відбувається в межах елемента. |
| touchleave | Подія виникає, коли точка дотику виходить за рамки елемента. |
| touchcancel | Подія виникає тоді, коли точка дотику більше не реєструється на поверхні. Приміром, переміщення за межі браузера. |
Дані події можна відстежувати на будь-який елемент сторінки. При спрацьовуванні події в обробник передається об’єкт подія, який містить певну інформацію, наприклад, такі як координати дотику на станиці. Для того щоб використовувати обробники подій для елементів, використовуйте element.addEventListener. ().
В якості прикладу, ми додамо обробник події для тега body на сторінці.
window.addEventListener. (‘load’, function(){ // після завантаження сторінки
document.body.addEventListener. (‘touchstart’, function(e){
alert(e.changedTouches[0].pageX) // показ коррдинат місця дотику з X-у.
}, false)
}, false)
В даному прикладі після завантаження сторінки був доданий обробник події touchstart на елемент document.body. Всередині функції для touchstart ми звертаємося до об’єкта changedTouches, який знаходиться всередині об’єкта Event. Він містить інформацію про точках дотику ініційований на поверхні сенсора екрану. У цьому прикладі нас цікавить перший дотик до сенсора екрану, зокрема координати pageX.
Давайте тепер розглянемо приклад використання подій touchmove і touchend щоб показати відстань, пройдена в момент впливу на сенсор від початку і до кінця в блоці div.
Дивіться приклад демонстрації роботи (у даному прикладі так само додана емуляція курсору миші, для пристроїв без сенсора). Щоб побачити реакцію скрипта, на сторінці прикладу слід провести курсором по блоку.
Доторкніться сюди!
Подія
Сам скрипт з обробником подій:
window.addEventListener. (‘load’, function(){
var box1 = document.getElementById(‘box1’)
var statusdiv = document.getElementById(‘statusdiv’)
var startx = 0
var dist = 0
box1.addEventListener. (‘touchstart’, function(e){
var touchobj = e.changedTouches[0] // перша точка дотику
startx = parseInt(touchobj.clientX) // положення точки дотику по x відносно лівого краю браузера
statusdiv.innerHTML = ‘Status: touchstart
ClientX: ‘+ startx + ‘px’
e.preventDefault()
}, false)
box1.addEventListener. (‘touchmove’, function(e){
var touchobj = e.changedTouches[0] // перша точка дотику для цієї події
var dist = parseInt(touchobj.clientX) – startx
statusdiv.innerHTML = ‘Подія: touchmove
Гориз. переміщення: ‘+ dist + ‘px’
e.preventDefault()
}, false)
box1.addEventListener. (‘touchend’, function(e){
var touchobj = e.changedTouches[0] // перша точка дотику для цієї події
statusdiv.innerHTML = ‘Подія: touchend
Координати точки x: ‘+ touchobj.clientX + ‘px’
e.preventDefault()
}, false)
}, false)
Є кілька моментів, які варто було б зазначити:
- У нашому прикладі ми скористалися event.preventDefault(), це потрібно для того, щоб виключити виникнення стандартних реакцій на дії курсору миші з боку браузера.
- Для кожного з подій ми окремо отримуємо доступ до першого елемента event.changedTouches[], це зроблено так, тому що події можуть ініціюватися одночасно декількома пальцями.
- Для отримання значення відстані в пискелях, від початку події touchstart і завершенням touchend, ми спочатку записує в змінну startx при події touchstart. Після цього протягом усіх виникнень подій touchmove ми, знаючи позицію clientX, віднімаємо з неї значення startx.
- Варто звернути увагу на те, що подія touchend продовжує функціонувати, навіть якщо ви повели курсор за межі блоку. Цю особливість слід враховувати при розробці.
Об’єкт event.changedTouches[] є одним з численних властивостей об’єкта Event, в якому з’являються дані в момент виникнення дотику з сенсором. Давайте розглянемо цей об’єкт більш детально.
Об’єкти, що виникають під час дотику до сенсора.
Об’єкт Event може виникати не тільки при роботі з сенсором, але і при інших подіях, скажімо, це може бути подія onclick, onkeypress, або щось в цьому роді. При виникненні подій пов’язаний з сенсором, об’єкт буде містити унікальні властивості, які містять детальну інформацію про подію дотику до сенсора, та іншу інформацію про це.
| altkey | Значення логічного типу, вказує на те, чи була натиснута клавіша alt під час виникнення події на сенсорі. |
| changedTouches | Список об’єктів, які були задіяні на момент дії дотику до сенсора:
Ви можете використовувати властивість lenght, щоб отримати кількість об’єктів торкання всередині changedTouches[] |
| ctrlKey | Логічне значення, яке вказує, чи була натиснута клавіша Ctrl під час сенсорного події. |
| metaKey | Логічне значення, яке вказує, чи була натиснута клавіша Meta в момент торкання події. Клавіша Meta — спеціальна клавіша на клавіатурах MIT, Happy Hacking і Sun Microsystems. Позначається суцільним ромбом. |
| shiftKey | Логічне значення, яке вказує, чи була натиснута клавіша shift під час сенсорного події. |
| targetTouches | Список точок зіткнення, які відбуваються в даний час з сенсорною поверхнею, і перебувають на тому самому елементі від моменту виникнення події.
Наприклад, припустимо, що ви зв’яжете подія touchstart до DIV і помістіть два пальці вниз на поверхні. targetTouches буде містити тільки інформацію про палеце(цах), розташованому всередині DIV, а не тих що знаходяться ззовні. Ви можете використовувати властивість lenght, щоб отримати кількість об’єктів торкання всередині targetTouches[]. |
| touches | Список об’єктів, що представляють всі торкання точок дотику в даний час у контакті з сенсорною поверхнею, незалежно від того, на яких елементах сенсорної поверхні знаходяться точки дотику на даний момент. |
| type | Тип події, яке викликало об’єкт Event, скажімо, це може бути touchstart, touchmove і т. д. |
| target | Цільовий елемент, пов’язаний з цією подією |
Розглянемо простий приклад, на основі обробника події touchstart ми одержимо список всіх точок дотику допомогою об’єкта Event, а точніше його властивості touches.
document.body.addEventListener. (‘touchstart’, function(e){
var touchlist = e.touches
for (var i=0; i
box1.addEventListener. (‘touchstart’, function(e){
var touchobj = e.changedTouches[0] // перша точка дотику
startx = parseInt(touchobj.clientX) // положення по x щодо лівій частині браузера
e.preventDefault()
}, false)
В даному прикладі e.changedTouches[0] є сенсорним об’єктом, а clientX є одним із властивостей сенсорного об’єкта. Давайте розглянемо, які властивості можуть на даний момент у сенсорних об’єктів.
| identifier | Нумерація об’єкта дотику, кожен об’єкт на сенсорі екрану бере свій уникльный порядковий номер. Починається значення 0, і далі по порядку. Зберігається значення для кожної точки дотику до того моменту, поки палець користувача не знімається з поверхні. |
| screenX | Х координата точки дотику щодо лівого краю екрана користувача. |
| screenY | Y координати точки дотику по відношенню до верхнього краю екрану користувача. |
| clientX | Х координата точки дотику щодо лівого краю вікна перегляду, не включаючи зміщення прокрутки. |
| clientY | Y координати точки дотику по відношенню до верхнього краю вікна перегляду, не включаючи зміщення прокрутки. |
| pageX | Х координата точки дотику щодо лівого краю вікна перегляду, в тому числі зміщення прокрутки. |
| pageY | Y координати точки дотику по відношенню до верхнього краю вікна перегляду, в тому числі зміщення прокрутки. |
| radiusX | Радіус еліпса, який найбільш близько визначає сенсорну область (наприклад, палець, стилус) вздовж осі х. |
| radiusY | Радіус еліпса, який найбільш близько визначає сенсорну область (наприклад, палець, стилус) вздовж осі y. |
| rotationAngle | Кут (в градусах), еліпс описується в radiusX і radiusY при повороті за годинниковою стрілкою навколо центру. |
| force | Повертає силу точки дотику у вигляді цілого числа від 0 до 1, де 0-немає сили, яка була визначена пристроєм, і 1, максимальне значення. |
| target | Цільовий елемент точки дотику, може відрізнятися від елемента на який розміщувалося подія.
document.body.addEventListener. (‘touchstart’, function(e){ |
При роботі з властивостями найбільш часто вам доведеться працювати з координатами точок дотику. Трохи математики, і можна дізнатися в якому напрямку здійснюється рух об’єктів, і з якою швидкістю.
В якості продовження є друга частина, там ми розглядаємо приклад переміщення об’єкта. Приклад наочно показує можливість використання обробника події touchmove.
Додав: htmaker, 04.09.2016 р.
(4 голосів, середній: 5,00 з 5)
Завантаження…
Діліться з друзями:
См. також:
Мета тег robots, приклади використання
Рубрика: Html, CSS, Javascript, SEO
Stimed – задаємо CSS-стилі по часу
Рубрика: Html, CSS, Javascript
Небезпека використання атрибуту target=”_blank”
Рубрика: Html, CSS, Javascript, Інф. безпека
Нескінченна анімація обертання на CSS
Рубрика: Html, CSS, Javascript
Анімація обертання при наведенні курсору
Рубрика: Html, CSS, Javascript
Стилізація виділення номера телефону до мобільних браузерах
Рубрика: Html, CSS, Javascript
Список вибору на JQuery
Рубрика: Html, CSS, Javascript
Фіксований заголовок таблиці HTML
Рубрика: Html, CSS, Javascript
Ефекти кнопок для сайту
Рубрика: Html, CSS, Javascript
Коментарі
Артур пише:28.02.2017 у 21:21
Дякую за статтю!
Відповісти
Юрій Бедулин пише:13.06.2017 у 03:16
Спасибі! Відкрив як нагадування, але побачив повноту розкриття теми, чого не знаходив раніше! Спецом поділився ВКонтакте, щоб Вам приємно зробити ) Заходьте в Мінськ ) http://seo.siltri.by
Відповісти
