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

時間 2019-12-08

標籤移動 web 觸屏事件按下鬆開滑動欄目無線简体版

原文原文鏈接

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

1、觸摸事件

ontouchstartcss

ontouchmovehtml

ontouchendjava

ontouchcancel web

前移動端瀏覽器均支持這4個觸摸事件，包括IE。因爲觸屏也支持MouseEvent，所以他們的順序是須要注意的：數組

touchstart → mouseover → mousemove → mousedown → mouseup → click1瀏覽器

/*** onTouchEvent*/ide

 
      var div = document.getElementById("div"); 
     
      //touchstart相似mousedown 
     
      div.ontouchstart = function(e){ 
     
      //事件的touches屬性是一個數組，其中一個元素表明同一時刻的一個觸控點，從而能夠經過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 
     
      };

3、重力感應

重力感應較簡單，只須要爲body節點添加onorientationchange事件便可。測試

在此事件中由window.orientation屬性獲得表明當前手機方向的數值。window.orientation的值列表以下：spa

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

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

180：轉了180°

90：逆時針轉了90°

測試，Android2.1還沒有支持重力感應。以上即目前的觸屏事件，這些事件還沒有併入標準，但已被普遍使用。未在其餘環境下測試。

//以上爲轉載。下面是偶在作電子閱讀的實例

1）隨手指滑動，須要滑動的區域<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)手指滑動離開後觸發須要滑動的區域<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) 設置必定時間後觸發事件 
     
 
      setTimeout( 
      function  
      (){  
     
 
      $( 
      '#feedOk' 
      ).hide(); 
     
 
      $( 
      "#read a" 
      ).html(「下載成功！」); 
     
 
      document.location.href= 
      "index.html" 
      ; 
     
 
      },2000); 
     