手機(jī)上JS事件是ontouchstart、ontouchend、ontouchmove；和PC上JS事件onmousedown、onmouseup、onmousemove是對(duì)應(yīng)的。

一、觸摸事件
ontouchstart
ontouchmove
ontouchend
ontouchcancel

目前移動(dòng)端瀏覽器均支持這4個(gè)觸摸事件，包括IE。由于觸屏也支持MouseEvent，因此他們的順序是需要注意的：

touchstart → mouseover → mousemove → mousedown → mouseup → click1

/*** onTouchEvent*/
var div = document.getElementById("div");
//touchstart類似mousedown
div.ontouchstart = function(e){
//事件的touches屬性是一個(gè)數(shù)組，其中一個(gè)元素代表同一時(shí)刻的一個(gè)觸控點(diǎn)，從而可以通過(guò)touches獲取多點(diǎn)觸控的每個(gè)觸控點(diǎn)
//由于我們只有一點(diǎn)觸控，所以直接指向[0]
var touch = e.touches[0];
//獲取當(dāng)前觸控點(diǎn)的坐標(biāo)，等同于MouseEvent事件的clientX/clientY
var x = touch.clientX;
var y = touch.clientY;
};
//touchmove類似mousemove
div.ontouchmove = function(e){
//可為touchstart、touchmove事件加上preventDefault從而阻止觸摸時(shí)瀏覽器的縮放、滾動(dòng)條滾動(dòng)等
e.preventDefault();
};
//touchend類似mouseup
div.ontouchup = function(e){
//nothing to do
};

三、重力感應(yīng)

重力感應(yīng)較簡(jiǎn)單，只需要為body節(jié)點(diǎn)添加onorientationchange事件即可。

在此事件中由window.orientation屬性得到代表當(dāng)前手機(jī)方向的數(shù)值。window.orientation的值列表如下：
0：與頁(yè)面首次加載時(shí)的方向一致
-90：相對(duì)原始方向順時(shí)針轉(zhuǎn)了90°
180：轉(zhuǎn)了180°
90：逆時(shí)針轉(zhuǎn)了90°

測(cè)試，Android2.1尚未支持重力感應(yīng)。以上即目前的觸屏事件，這些事件尚未并入標(biāo)準(zhǔn)，但已被廣泛使用。未在其他環(huán)境下測(cè)試。

//以上為轉(zhuǎn)載。下面是偶在做電子閱讀的實(shí)例

1）隨手指滑動(dòng)，需要滑動(dòng)的區(qū)域<div id="#roll" ontouchmove="tmove(event)"></div>

<script type="text/javascript">
var u = $('#roll');
function tmove(evet){
var touch = evet.touches[0];
var x = touch.clientX;
var y = touch.clientY;
var left = $("#roll").css("left");

$("#roll").animate({left:"-264px"},1000);

?evet.preventDefault();
}

</script>

2)手指滑動(dòng)離開(kāi)后觸發(fā)需要滑動(dòng)的區(qū)域<div id="#roll" ontouchend="tend(event)" ontouchstart="tstart(event)"></div>

?var down = 0;
?var up = 0;
?var index=0;
?var w = 64;
?function tstart(event)
?{
??down=event.changedTouches[0].pageX;//獲取手指剛觸摸時(shí)的x坐標(biāo)
??}
?function tend(event)
?{
??up=event.changedTouches[0].pageX;//獲取手指離開(kāi)時(shí)的x坐標(biāo)
??ul_obj = $("#roll");
??if(down>up)
???{//向左
???$("#roll").animate({left:(index+"px")},1000);
????index = index-64<=-180?-180:index-w;
???}
??else if(down<up)
???{//向右
????$("#roll").animate({left:((index+w)+"px")},1000);
????index = index+64>0?0:index+w;
??}
??}

3)還有就是電子書(shū)別的一些用到滴~幫助記憶~

3.1 ) 清空文本框:

$("input").attr("value","");

3.2 ) setIntervar(function（）{ }，1000) 設(shè)置自動(dòng)輪播圖

setInterval(function (){??????
??????if (i > $('.img ul li img').length - 2)
???????{
????????i = 0;
???????$('.dot a').removeClass('at').eq(i).addClass('at');?
???????}
??????else{
??????i++;
??????$('.dot a').removeClass('at').eq(i).addClass('at');
????}
??????$('.img ul').animate({left:-300*i},1000)

},2000);

3.3 ）setTimeout(function(){},1000) 設(shè)置一定時(shí)間后觸發(fā)事件

setTimeout(function (){??????
??????$('#feedOk').hide();

????? $("#read a").html(“下載成功！”);
??????document.location.href="index.html";
??????},2000);

3.4）返回上一頁(yè)

?<a href="javascript:history.back()" class="back"></a>

總結(jié)

以上是生活随笔為你收集整理的js中的触屏事件的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。