MooTools 1.3中的屏幕触摸事件_《Hi, Kainy》学习笔记,建站❤编程,JavaScript,》JavaScript,框架,MooTools,

MooTools在其最新的1.3版本中加入了一个很给力的功能——检测屏幕触摸事件：touchstart， touchmove， touchend，touchcancel， gesturestart， gesturechange，gestureend和 orientationchange，使得这一Javascript框架更加完善。这篇文章就演示如何按照传统MooTools事件处理的语法，通过使用MooTools新特性来完成对移动事件的监听及响应。让移动设备用户在你的网页上完成原本只能在手机应用上进行的操作。

先看演示：必须用手机浏览器才有效果哦~.

JavaScript语句：

MooTools提供了对四种不同的触摸状态（touchstart、 touchmove、 touchend、 touchcancel）以及三种姿势（gesturestart、 gesturechange、 gestureend）的检测。你甚至可以通过orientationchange来检测到触摸屏幕的手指何时改变方向！

首先，我们按照MooTools的传统风格来创建对屏幕触摸事件的监听器：

> //在网页文档的body中添加 touchstart 事件的方法：
>
> document.body.addEvent(‘touchstart’,function(e) {
>
> //你需要的功能代码
>
> });
>
> //在网页文档的body中添加 touchmove 事件
>
> document.body.addEvent(‘touchmove’,function(e) {
>
> //你需要的功能代码
>
> });
>
> // 在网页文档的body中添加 touchend 事件
>
> document.body.addEvent(‘touchend’,function(e) {
>
> //你需要的功能代码
>
> });
>
> // 在文档的body中添加 gesturestart 事件
>
> document.body.addEvent(‘gesturestart’,function(e) {
>
> //你需要的功能代码
>
> });
>
> / 在文档的body中添加 gesturechange 事件
>
> document.body.addEvent(‘gesturechange’,function(e) {
>
> //你需要的功能代码
>
> });
>
> // 在文档的body中添加 gestureend 事件
>
> document.body.addEvent(‘gestureend’,function(e) {
>
> //你需要的功能代码
>
> });
>
> // 在文档的body中添加 orientationchange 事件
>
> document.body.addEvent(‘orientationchange’,function(e) {
>
> //你需要的功能代码
>
> });

屏幕触摸事件对象和其他事件对象并无差别，你可以在MooTools事件文档中找到相应事件的属性，这里以监听所有移动事件的代码片段为例：

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’);

});

每当一个触摸屏事件触发，该事件的名称将被放置到顶部ID的一个UL元素中。

如何找到的事件名称？

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

};
以上就是新的触摸/手势事件与传统的浏览器事件列表。

MooTools Mobile

当然，以上只是MooTools1.3所带来新特性的简单运用，单靠以上对触摸/手势事件的使用不太可能满足实际移动应用上的需求，比如你无法判断用户的滑动方向，更不能识别多点触控事件？不过不用担心：MooTools的核心开发者Christoph Pojer开发的 MooTools Mobile可以满足您这方面的需求，这是一组专门设计的MooTools类，可以为您提供更多触摸，滑动等动作细节的信息。

为您推荐