mootools

The brings about a vast array of new functionality to the JavaScript framework.  One big new addition to MooTools Core is the ability to detect mobile events:  touchstart, touchmove, touchend, touchcancel, gesturestart, gesturechange, gestureend, and orientationchange.  Let me show you how to listen for and react to each of these mobile events using the new MooTools touch/gesture functionality with the traditional MooTools event listener syntax!

的 JavaScript框架带来了大量新功能。 一个大的新除了MooTools的核心是检测移动事件的能力： touchstart ， touchmove ， touchend ， touchcancel ， gesturestart ， gesturechange ， gestureend和orientationchange 。 让我向您展示如何使用具有传统MooTools事件侦听器语法的新MooTools触摸/手势功能来侦听每个移动事件并对之做出React！

MooTools JavaScript (The MooTools JavaScript)

There are four different touch events that may be detected with MooTools:  touchstart, touchmove, touchend, and touchcancel. There are three gesture events which may be detected: gesturestart, gesturechange, and gestureend. You can even detect when the orientation changes with the orientationchange event!  You create mobile event listeners in the traditional MooTools fashion:

MooTools可以检测到四种不同的触摸事件： touchstart ， touchmove ， touchend和touchcancel 。 有可检测到三个手势事件： gesturestart ， gesturechange ，和gestureend 。 您甚至可以通过orientationchange事件检测方向何时发生变化！ 您可以按照传统的MooTools方式创建移动事件监听器：

//add touchstart event to the bodydocument.body.addEvent('touchstart',function(e) {	//react to the touchstart however you'd like!});//add touchmove event to the bodydocument.body.addEvent('touchmove',function(e) {	//react to the touchmove however you'd like!});//add touchend event to the bodydocument.body.addEvent('touchend',function(e) {	//react to the touchend however you'd like!});//add gesturestart event to the bodydocument.body.addEvent('gesturestart',function(e) {	//react to the gesturestart however you'd like!});//add gesturechange event to the bodydocument.body.addEvent('gesturechange',function(e) {	//react to the gesturechange however you'd like!});//add gestureend event to the bodydocument.body.addEvent('gestureend',function(e) {	//react to the gestureend however you'd like!});//add orientationchange event to the bodydocument.body.addEvent('orientationchange',function(e) {	//react to the orientationchange however you'd like!});

The event object looks exactly as any other event object does.  You can find the event properties list in the . Here's a quick snippet to listen to all mobile events:

该事件对象看起来与其他任何事件对象完全一样。 您可以在找到事件属性列表。 以下是收听所有移动事件的快速摘要：

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');		});	});});

Whenever a mobile event is triggered, a new list item with the event name will be placed at the top of an UL element with the id mobileEventList.

每当触发移动事件时，带有事件名称的新列表项将被放置在ID为mobileEventList的UL元素的mobileEventList 。

您在哪里找到了活动名称？ (Where Did You Find the Event Names?)

A quick peek at the Element.Event code provides you a list of every event type MooTools natively supports:

快速浏览一下Element.Event代码可以为您提供MooTools本机支持的每种事件类型的列表：

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};

As you can see, the new touch and gesture events are listed with the traditional browser events!

如您所见，传统的浏览器事件中列出了新的触摸和手势事件！

MooTools Mobile (MooTools Mobile)

Obviously you cannot easily build a mobile application from simple and gesture touch events as shown above.  How do you know which direction the user swiped?  How can you detect if the user pinched?  Have no fear:  MooTools Core Developer Christoph Pojer has created , a set of MooTools classes providing you more information about touches, swipes, pinches, and mobile browser features!  Look for future blog posts from Christoph on this blog about MooTools Mobile and how you can use it on your mobile website!

显然，您无法轻松地从简单的手势触摸事件构建移动应用程序，如上所示。 您如何知道用户向哪个方向滑动？ 如何检测用户是否捏？ 不用担心：MooTools核心开发人员Christoph Pojer创建了 ，这是一组MooTools类，可为您提供有关触摸，滑动，捏和移动浏览器功能的更多信息！ 在该博客上查找Christoph将来发布的有关MooTools Mobile的博客文章，以及如何在移动网站上使用它！

翻译自:

mootools