移動web js觸屏事件 按下 鬆開 滑動

標籤：doc   pre   頁面   change   contain   fun   輪播圖   x11   元素   

移動web js觸屏事件 按下 鬆開 滑動講解

一、觸摸事件

ontouchstart

ontouchmove

ontouchend

ontouchcancel 

 

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

 

touchstart → mouseover → mousemove → mousedown → mouseup → click1

 

/*** onTouchEvent*/

12345678910111213141516171819

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

 

三、重力感應

 

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

 

在此事件中由window.orientation屬性得到代表當前手機方向的數值。window.orientation的值列表如下：

 

0：與頁面首次載入時的方向一致

-90：相對原始方向順時針轉了90°

180：轉了180°

90：逆時針轉了90°

 

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

 

//以上為轉載。下面是偶在做電子閱讀的執行個體

 

1）隨手指滑動，需要滑動的地區<div id="#roll" ontouchmove="tmove(event)"></div>

 

1234567891011

<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)手指滑動離開後觸發需要滑動的地區<div id="#roll" ontouchend="tend(event)" ontouchstart="tstart(event)"></div>

 

1234567891011121314151617181920212223

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 ) 清空文字框:

 

1234567891011121314151617181920

$("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) 設定一定時間後觸發事件setTimeout(function (){ $(‘#feedOk‘).hide();$("#read a").html(“下載成功！”);document.location.href="index.html";},2000);

 

3.4）返回上一頁

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

移動web js觸屏事件 按下 鬆開 滑動