关♥生活,关注互联网。
MooTools 1.3中的屏幕触摸事件
MooTools在其最新的1.3版本中加入了一个很给力的功能——检测屏幕触摸事件:touchstart
, touchmove
, touchend
,touchcancel
, gesturestart
, gesturechange
,gestureend
和 orientationchange,使得这一
Javascript框架更加完善。这篇文章就演示如何按照传统MooTools事件处理的语法,通过使用MooTools新特性来完成对移动事件的监听及响应。让移动设备用户在你的网页上完成原本只能在手机应用上进行的操作。
先看演示:必须用手机浏览器才有效果哦~.
JavaScript语句:
//在网页文档的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) {
//你需要的功能代码
});
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’);});});});
如何找到的事件名称?
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类,可以为您提供更多触摸,滑动等动作细节的信息。
约13年前
这是什么软件呢??