手機上JS事件是ontouchstart、ontouchend、ontouchmove；和PC上JS事件onmousedown、onmouseup、onmousemove是對應的。

一、觸摸事件
ontouchstart
ontouchmove
ontouchend
ontouchcancel

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

touchstart → mouseover → mousemove → mousedown → mouseup → click1

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

三、重力感應

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

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

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

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

1）隨手指滑動，需要滑動的區(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)手指滑動離開后觸發(fā)需要滑動的區(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;//獲取手指剛觸摸時的x坐標
??}
?function tend(event)
?{
??up=event.changedTouches[0].pageX;//獲取手指離開時的x坐標
??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)還有就是電子書別的一些用到滴~幫助記憶~

3.1 ) 清空文本框:

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

3.2 ) setIntervar(function（）{ }，1000) 設置自動輪播圖

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) 設置一定時間后觸發(fā)事件

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

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

3.4）返回上一頁

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

總結(jié)

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

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