文档介绍：移动前端javascript事件作者:admin 发布:2013-02-2510:54 分类:移动前端 阅读: 暂无评论 事件://手势事件touchstart//当手指接触屏幕时触发touchmove//当已经接触屏幕的手指开始移动后触发touchend//当手指离开屏幕时触发touchcancel//触摸事件gesturestart//当两个手指接触屏幕时触发gesturechange//当两个手指接触屏幕后开始移动时触发gestureend//屏幕旋转事件onorientationchange//检测触摸屏幕的手指何时改变方向orientationchange//touch事件支持的相关属性touchestargetToucheschangedTouchesclientX//Xcoordinateoftouchrelativetotheviewport(excludesscrolloffset)clientY//Ycoordinateoftouchrelativetotheviewport(excludesscrolloffset)screenX //RelativetothescreenscreenY//RelativetothescreenpageX//Relativetothefullpage(includesscrolling)pageY//Relativetothefullpage(includesscrolling)target//Nodethetoucheventoriginatedfromidentifier//Anidentifyingnumber,uniquetoeachtouchevent 屏幕旋转事件://判断屏幕是否旋转functionorientationChange(){switch(){case0:alert("肖像模式0,screen-width:"++";screen-height:"+);break;case-90:alert("左旋-90,screen-width:"++";screen-height:"+);break;case90:alert("右旋90,screen-width:"++";screen-height:"+);break;case180:alert("风景模式180,screen-width:"++";screen-height:"+);break;};};//添加事件监听addEventListener('load',function(){orientationChange();=orientationChange;}); 双手指滑动事件://双手指滑动事件addEventListener('load',function(){=twoFingerScroll;},false//兼容各浏览器,表示在冒泡阶段调用事件处理程序(true捕获阶段));functiontwoFingerScroll(ev){vardelta=;//对delta值进行判断(比如正负),而后执行相应操作returntrue;}; 在互联网中,一般用户都是通过鼠标点击、鼠标悬停、鼠标离开等执行一些前端的事件,但是在移动前端,用户却是通过手指来进行操作。从而衍生出移动前端的手势事件。鼠标中的click事件虽然也可以在移动前端进行触发,但这个事件在移动端会有大约半秒中的延迟。所以一般都不采用。在移动端的手势事件一般有四种情况:touchstart:手指放到屏幕上的时候触发touchmove:手指在屏幕上移动的时候触发touchend:手指从屏幕上拿起的时候触发touchcancel:系统取消touch事件的时候触发。前三者应用很广泛,第四个应用较少。至今所做的项目中,第四项还没涉及过。如果有人用过,可以拿出来分享一下。一个demo:<!DOCTYPEhtml><html><metacharset="utf-8"/><metaname="viewport"content="width=480"/><head><style>#stage{width:480px;height:360px;overflow:hidden;background-color:black;}#bg{position:relative;width:480px;height: