331 В новым релизе MooTools 1.3 представлено много новых функциональных возможностей для JavaScript фреймворка. Одна из самых приятных — это возможность детектить события в мобильниках: touchstart, touchmove, touchend, touchcancel, gesturestart, gesturechange, gestureend и orientationchange. Давайте, мы вам покажем, как можно использовать данную функциональность MooTools для мобильных телефонов!
MooTools JavaScript
Существует четрые различных события, которые могут быть опознаны с помощью MooTools: touchstart, touchmove, touchend и touchcancel. Три события жестов: gesturestart, gesturechange и gestureend. Вы также можете проследить, если изменилась ориентация положения мобильника с помощью orientationchange! Мы создаем события в традиционном стиле MooTools:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
//add touchstart event to the body document.body.addEvent('touchstart',function(e) { //react to the touchstart however you'd like! }); //add touchmove event to the body document.body.addEvent('touchmove',function(e) { //react to the touchmove however you'd like! }); //add touchend event to the body document.body.addEvent('touchend',function(e) { //react to the touchend however you'd like! }); //add gesturestart event to the body document.body.addEvent('gesturestart',function(e) { //react to the gesturestart however you'd like! }); //add gesturechange event to the body document.body.addEvent('gesturechange',function(e) { //react to the gesturechange however you'd like! }); //add gestureend event to the body document.body.addEvent('gestureend',function(e) { //react to the gestureend however you'd like! }); //add orientationchange event to the body document.body.addEvent('orientationchange',function(e) { //react to the orientationchange however you'd like! }); |
Объект события выглядит точно также, как и обычный объект. Дополнительную информацию по свойствам таких объектов можно найти в MooTools Event documentation. Вот быстрый сниппет для прослушки всех мобильных событий:
|
1 2 3 4 5 6 7 8 9 10 |
window.addEvent('domready',function() { ['touchstart','touchmove','touchend','touchcancel', 'gesturestart','gesturechange', 'gestureend','orientationchange'].each(function(ev) { document.body.addEvent(ev,function(e) { new Element('li',{ html: ev }).inject('mobileEventList','top'); }); }); }); |
Всякий раз, когда срабатывает мобильное событие, новый элемент списка с именем события помещается наверх UL элемента с id mobileEventList.
Откуда вы нашли имена событий?
Быстрый просмотр Element.Event кода, дал нам список каждого события, которое поддерживается MooTools:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
Element.NativeEvents = { click: 2, dblclick: 2, mouseup: 2, mousedown: 2, contextmenu: 2, //mouse buttons mousewheel: 2, DOMMouseScroll: 2, //mouse wheel mouseover: 2, mouseout: 2, mousemove: 2, selectstart: 2, selectend: 2, //mouse movement keydown: 2, keypress: 2, keyup: 2, //keyboard orientationchange: 2, // mobile touchstart: 2, touchmove: 2, touchend: 2, touchcancel: 2, // touch gesturestart: 2, gesturechange: 2, gestureend: 2, // gesture focus: 2, blur: 2, change: 2, reset: 2, select: 2, submit: 2, //form elements load: 2, unload: 1, beforeunload: 2, resize: 1, move: 1, DOMContentLoaded: 1, readystatechange: 1, //window error: 1, abort: 1, scroll: 1 //misc }; |
