mootools

When the community asked the MooTools team to add basic mobile event listening to MooTools' Event class, we listened; today . What if we want more detailed mobile event listeners though, like swipe with direction, pinch, or touchhold events? That's where Christoph Pojer's excellent comes in. MooTools Mobile isn't a full mobile framework, but rather a set of utilities to make catering to mobile a bit more...touching. Let's have a look at the resources provided by MooTools Mobile!

当社区要求MooTools团队添加监听MooTools的Event类的基本移动事件时，我们进行了监听； 今天， 。 但是，如果我们想要更详细的移动事件侦听器，如通过方向滑动，捏或触摸事件，则该怎么办？ 这就是Christoph Pojer出色的出现的地方。MooTools Mobile并不是一个完整的移动框架，而是一组实用程序，可以更好地满足移动用户的需求。 让我们看一下MooTools Mobile提供的资源！

As you've come to expect from members of the MooTools team, Christoph's new Touch-based event classes are compact and modular. Each class will be found within the Touch path.

正如您对MooTools团队成员所期望的那样，Christoph基于触摸的新事件类是紧凑和模块化的。 每个类别都可以在“触摸”路径中找到。

滑动 (Swipe)

By using the Touch/Swipe resource, you can attain the direction of the swipe, as well as the start and end coordinates:

通过使用“ Touch/Swipe资源，您可以获得Touch/Swipe的方向以及开始和结束坐标：

// Add the swipe event listeneranyElement.addEvent("swipe", function(event){    event.direction // "left" or "right"    event.start // {x: Number, y: Number} Swipe start position    event.end // {x: Number, y: Number} Swipe end position});// Configure minimal swipe distance and vertical swipe preferencesanyElement.store("swipe:distance", 30); // Default: 50anyElement.store("swipe:cancelVertical", true); // Default: false

As you can see above, you may also configure minimum swipe distances and cancellation of vertical swipes.

如上所示，您还可以配置最小滑动距离和取消垂直滑动。

捏 (Pinch)

The Touch/Pinch resource allows you to listen for pinches, as well as configure the pinch threshold:

“ Touch/Pinch资源使您可以监听捏，以及配置捏阈值：

// Add a pinch event to anyElementanyElement.addEvent("pinch", function(event){    event.pinch // "in" or "out"});// Store a custom thresholdanyElement.store("pinch:threshold", 0.3); // Default: 0.5; Amount of scaling to be done to fire the pinch event

The pinch threshold is stored within elements themselves so you may customize to fit any element.

收缩阈值存储在元素本身中，因此您可以自定义以适合任何元素。

触屏 (Touchhold)

The touchhold event is used throughout all mobile operating systems, so why not implement touchhold within the browser?

所有移动操作系统都使用touchhold事件，那么为什么不在浏览器中实现touchhold？

//  Listen for touchhold on anyElementanyElement.addEvent("touchhold", function(event){    // Event fires});

Any element may store an optional delay before the touchhold event fires:

在touchhold事件触发之前，任何元素都可以存储可选的延迟：

anyElement.store("touchhold:delay", 1000); // Default: 750

Maximum versatility with minimal code!

以最少的代码实现最大的多功能性！

浏览器增强！ (Browser Enhancements!)

Besides providing these custom touch events, MooTools Mobile provides additional information within the Browser object via a Device property:

除了提供这些自定义的触摸事件外，MooTools Mobile还通过Device属性在Browser对象中提供了其他信息：

Browser.Device // Object added to Browser	Browser.Device.name // ipad / iphone / ipod OR other	Browser.Device.ipad // true if on ipad	Browser.Device.iphone // true if on iphone	Browser.Device.ipod // true if on ipod	Browser.hasHighResolution // true on iPhone 4	Browser.isMobile // True on any platform that is not Windows / Linux / Mac

These properties give you further insight as to the device capabilities!

这些属性使您可以进一步了解设备功能！

With mobile development booming for the foreseeable future, it's important to make sure your site is as mobile-friendly as possible. Christoph's mobile contribution is just the tiny helper developers may need to make their MooTools-powered web apps more mobile device-friendly. MooTools (Mobile) FTW!

在可预见的未来，随着移动开发的蓬勃发展，确保您的网站尽可能地适合移动设备使用非常重要。 Christoph的移动贡献只是开发人员可能需要的微小帮助者，以使其基于MooTools的Web应用程序对移动设备更加友好。 MooTools(移动)FTW ！

翻译自:

mootools