本文共 3285 字，大约阅读时间需要 10 分钟。
javascript(简称js)语言在移动前端应用很广。可以说必不可少，许多效果都是和js相关的。包括现在移动端的一些框架。jqmobi、jqtouch、sencha touch、jquerymobile等等。这些都是基于js而进行编写的。这篇暂时不讨论这些框架。以后会慢慢介绍其中的一两个框架的具体使用方法。这篇主要讨论一下部分常用的js事件在移动端的使用。举几个例子：
1、隐藏地址导航栏：
| 1 2 3 4 5 6 7 | < script type = "text/javascript" > // 该函数由Simon Willison编写,它只有一个参数,该参数表示被调用的函数名(在页面加载完毕时执行的函数的名字) function addLoadEvent(func) { var oldOnload = window.onload; if (typeof window.onload != 'function') { window.onload = func; } else { window.onload = function() { oldOnload(); func(); } } } // 添加Load事件处理 addLoadEvent(hideMenu); function hideMenu() { setTimeout("window.scrollTo(0, 0)", 1); } </ script > |
以上代码是针对IOS系统的移动端收缩地址导航栏作用的（部分安卓机也可以）。核心代码其实就是一句：
| 1 | setTimeout("window.scrollTo(0, 0)", 1); |
利用定时器，将窗口移动到内容端的最上端。从而隐掉地址导航栏。
2、判断手机横竖屏状态：
| 1 2 3 4 5 6 | < script type = "text/javascript" >function hengshuping(){ if(window.orientation==180||window.orientation==0){ alert("竖屏状态！") }if(window.orientation==90||window.orientation==-90){ alert("横屏状态！") } }window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", hengshuping, false);</ script > |
移动端的浏览器一般都支持window.orientation这个参数，通过这个参数可以判断出手机是处在横屏还是竖屏状态。从而根据实际需求而执行相应的程序。通过添加监听事件onorientationchange，进行执行就可以了。
3、判断是否是从主屏幕图标进入的网站。
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 | < script type = "text/javascript" > if ('standalone' in navigator && !navigator.standalone && (/iphone|ipod|ipad/gi).test(navigator.platform) && (/Safari/i).test(navigator.appVersion) && window.orientation==90||window.orientation==-90) { document.write('< link rel = "stylesheet" href = "css/add2home.css" >'); document.write('< script type = "application\/javascript" src = "js/add2home.js" charset = "utf-8" ><\/s' + 'cript>'); } </ script > |
通过判断navigator.standalone来确定是否是从主屏幕图标来进入网站的。这个主要是应用在webapp端还是web端进入网站的。从而 进行相应的操作。本例是navigator.standalone等于false即是从浏览器（web端）进入的网站的。那么在document文档中写 入两段代码。
4、取消浏览器默认行为：
| 1 2 3 4 5 6 7 8 9 | var preventDefaultScroll = function(event) { event.preventDefault(); window.scroll(0,0); return false; }; document.addEventListener('touchmove', preventDefaultScroll, false); |
取消浏览器默认行为，主要是为了控制一些手势事件。让它们按照具体的需求来进行相应的操作。核心代码是
event.preventDefault();
当手指滑动（touchmove）时进行触发。关于手指事件，我会专门开一贴进行讨论。5、手机加速度事件：
| 1 2 3 4 5 6 7 8 | < script type = "text/javascript" > var page=1; var xx=0; var jishu=0; function deviceMotionHandler(eventData) { var acceleration = eventData.accelerationIncludingGravity; var zhuanhouX=Math.round(acceleration.x); if(xx-zhuanhouX>3||xx-zhuanhouX<-3){ xx=zhuanhouX; jishu++; } if(jishu>10){ var imgshu=$("#yidongDiv").find("img").length; var yidongJuli=$("#rongqi").width(); if(!$("#yidongDiv").is(":animated")){ if(page==imgshu){ $("#yidongDiv").animate({left:'0px'},500) page=1; $("#changwenzi").attr("src","images/wenzi1.png") } else{ $("#yidongDiv").animate({left:'-='+yidongJuli},500) $("#changwenzi").attr("src","images/wenzi"+(page+1)+".png") page++; } } jishu=0; xx=0; }; } window.addEventListener('devicemotion', deviceMotionHandler, false); </ script > |
这个例子中，是通过获取手机加速度，来进行一个动画的实例。在IOS5以上版本已经可以支持devicemotion事件。android4.0也开始支持这个事件。eventData.accelerationIncludingGravity这个属性获取到的是一组数值
它包括X\Y\Z轴的一个数组。通过对var zhuanhouX=Math.round(acceleration.x);X值的正负进行判断手机是否处于水平左右摇晃状态，从而引发动画。
篇幅问题，先介绍5例常用的，以后会慢慢添加其他js方法在移动端的应用。
本文转自Ansue 51CTO博客，原文链接：http://blog.51cto.com/ansue/1659648，如需转载请自行联系原作者