js實現touch移動觸屏滑動事件

時間 2019-11-09
原文原文鏈接
如下是四種touch事件
touchstart: //手指放到屏幕上時觸發
touchmove: //手指在屏幕上滑動式觸發
touchend: //手指離開屏幕時觸發
touchcancel: //系統取消touch事件的時候觸發，這個好像比較少用html
每一個觸摸事件被觸發後，會生成一個event對象，event對象裏額外包括如下三個觸摸列表web
touches: //當前屏幕上全部手指的列表
targetTouches: //當前dom元素上手指的列表，儘可能使用這個代替touches
changedTouches: //涉及當前事件的手指的列表，儘可能使用這個代替touches
這些列表裏的每次觸摸由touch對象組成，touch對象裏包含着觸摸信息，主要屬性以下：
clientX / clientY: //觸摸點相對瀏覽器窗口的位置
pageX / pageY: //觸摸點相對於頁面的位置
screenX / screenY: //觸摸點相對於屏幕的位置
identifier: //touch對象的ID
target: //當前的DOM元素數組
注意：瀏覽器
手指在滑動整個屏幕時，會影響瀏覽器的行爲，好比滾動和縮放。因此在調用touch事件時，要注意禁止縮放和滾動。dom
1.禁止縮放
經過meta元標籤來設置。ide
2.禁止滾動
preventDefault是阻止默認行爲，touch事件的默認行爲就是滾動。
event.preventDefault();ui
 
 
 <!DOCTYPE html> 
 
 <html> 
 
 <head> 
 
 <meta http-equiv= 
 "Content-Type" 
 Content= 
 "text/html; charset=utf-8;" 
 > 
 
 <title>移動端觸摸滑動</title> 
 
 <meta name= 
 "author" 
 content= 
 "rainna" 
 /> 
 
 <meta name= 
 "keywords" 
 content= 
 "rainna's js lib" 
 /> 
 
 <meta name= 
 "description" 
 content= 
 "移動端觸摸滑動" 
 /> 
 
 <meta name= 
 "viewport" 
 content= 
 "target-densitydpi=320,width=640,user-scalable=no" 
 > 
 
 <style> 
 
 *{margin:0;padding:0;} 
 
 li{list-style:none;}.m-slider{width:600px;margin:50px 20px;overflow:hidden;} 
 
 .m-slider .cnt{position:relative;left:0;width:3000px;} 
 
 .m-slider .cnt li{float:left;width:600px;} 
 
 .m-slider .cnt img{display:block;width:100%;height:450px;} 
 
 .m-slider .cnt p{margin:20px 0;} 
 
 .m-slider .icons{text-align:center;color: 
 #000;} 
 
 .m-slider .icons span{margin:0 5px;} 
 
 .m-slider .icons .curr{color:red;} 
 
 .f-anim{-webkit-transition:left .2s linear;} 
 
 </style> 
 
 </head> 
 
 <body> 
 
 <div class= 
 "m-slider" 
 > 
 
 <ul class= 
 "cnt" 
 id= 
 "slider" 
 > 
 
 <li> 
 
 <img src= 
 "http://imglf1.ph.126.net/qKodH3sZoVbPalKFtHS9mw==/6608946691259322175.jpg" 
 > 
 
 <p>20140813鏡面的世界，終究只是倒影。看獲得你的身影，卻觸摸不到你的將來</p> 
 
 </li> 
 
 <li> 
 
 <img src= 
 "http://imglf1.ph.126.net/40-jqH_j6EoCWnZOixY2pA==/4798022453110310215.jpg" 
 > 
 
 <p>20140812錫林浩特前往東烏旗S101必經之處，一條極美的鐵路。鐵路下面是個小型的鹽沼，淡淡的有了一絲天空之境的感受。惋惜在此玩了一個小時也沒有看見一列火車通過，只好繼續趕往東烏旗。</p> 
 
 </li> 
 
 <li> 
 
 <img src= 
 "http://imglf0.ph.126.net/Jnmi2y51zVdjKAYlibtpFw==/3068640196117481166.jpg" 
 > 
 
 <p>20140811水的顏色爲何那麼藍，我也納悶，反正天然飽和度和對比度拉完就是這個顏色的</p> 
 
 </li> 
 
 <li> 
 
 <img src= 
 "http://imglf1.ph.126.net/79GPsjhwiIj8e-0nP5MsEQ==/6619295294699949331.jpg" 
 > 
 
 <p>海洋星球3重慶天氣熱得我想臥軌自殺</p> 
 
 </li> 
 
 <li> 
 
 <img src= 
 "http://imglf1.ph.126.net/40-jqH_j6EoCWnZOixY2pA==/4798022453110310215.jpg" 
 > 
 
 <p>以上這些做品分別來自兩位設計師做爲觀者，您可否經過設計風格進行區分</p> 
 
 </li> 
 
 </ul> 
 
 <div class= 
 "icons" 
 id= 
 "icons" 
 > 
 
 <span class= 
 "curr" 
 >1</span> 
 
 <span>2</span> 
 
 <span>3</span> 
 
 <span>4</span> 
 
 <span>5</span> 
 
 </div> 
 
 </div> 
 
 <script> 
 
 var 
 slider = { 
 
 //判斷設備是否支持touch事件 
 
 touch:('ontouchstart 
 ' in window) || window.DocumentTouch && document instanceof DocumentTouch, 
 
 slider:document.getElementById(' 
 slider 
 '), 
 
 //事件 
 
 events:{ 
 
 index:0, //顯示元素的索引 
 
 slider:this.slider, //this爲slider對象 
 
 icons:document.getElementById(' 
 icons 
 '), 
 
 icon:this.icons.getElementsByTagName(' 
 span 
 '), 
 
 handleEvent:function(event){ 
 
 var self = this; //this指events對象 
 
 if(event.type == ' 
 touchstart 
 '){ 
 
 self.start(event); 
 
 }else if(event.type == ' 
 touchmove 
 '){ 
 
 self.move(event); 
 
 }else if(event.type == ' 
 touchend 
 '){ 
 
 self.end(event); 
 
 } 
 
 }, 
 
 //滑動開始 
 
 start:function(event){ 
 
 var touch = event.targetTouches[0]; //touches數組對象得到屏幕上全部的touch，取第一個touch 
 
 startPos = {x:touch.pageX,y:touch.pageY,time:+new Date}; //取第一個touch的座標值 
 
 isScrolling = 0; //這個參數判斷是垂直滾動仍是水平滾動 
 
 this.slider.addEventListener(' 
 touchmove 
 ',this,false); 
 
 this.slider.addEventListener(' 
 touchend 
 ',this,false); 
 
 }, 
 
 //移動 
 
 move:function(event){ 
 
 //當屏幕有多個touch或者頁面被縮放過，就不執行move操做 
 
 if(event.targetTouches.length > 1 || event.scale && event.scale !== 1) return; 
 
 var touch = event.targetTouches[0]; 
 
 endPos = {x:touch.pageX - startPos.x,y:touch.pageY - startPos.y}; 
 
 isScrolling = Math.abs(endPos.x) < Math.abs(endPos.y) ? 1:0; //isScrolling爲1時，表示縱向滑動，0爲橫向滑動 
 
 if(isScrolling === 0){ 
 
 event.preventDefault(); //阻止觸摸事件的默認行爲，即阻止滾屏 
 
 this.slider.className = ' 
 cnt 
 '; 
 
 this.slider.style.left = -this.index*600 + endPos.x + ' 
 px 
 '; 
 
 } 
 
 }, 
 
 //滑動釋放 
 
 end:function(event){ 
 
 var duration = +new Date - startPos.time; //滑動的持續時間 
 
 if(isScrolling === 0){ //當爲水平滾動時 
 
 this.icon[this.index].className = ' 
 '; 
 
 if(Number(duration) > 10){ 
 
 //判斷是左移仍是右移，當偏移量大於10時執行 
 
 if(endPos.x > 10){ 
 
 if(this.index !== 0) this.index -= 1; 
 
 }else if(endPos.x < -10){ 
 
 if(this.index !== this.icon.length-1) this.index += 1; 
 
 } 
 
 } 
 
 this.icon[this.index].className = ' 
 curr 
 '; 
 
 this.slider.className = ' 
 cnt f-anim 
 '; 
 
 this.slider.style.left = -this.index*600 + ' 
 px 
 '; 
 
 } 
 
 //解綁事件 
 
 this.slider.removeEventListener(' 
 touchmove 
 ',this,false); 
 
 this.slider.removeEventListener(' 
 touchend 
 ',this,false); 
 
 } 
 
 }, 
 
 //初始化 
 
 init:function(){ 
 
 var self = this; //this指slider對象 
 
 if(!!self.touch) self.slider.addEventListener(' 
 touchstart',self.events, 
 false 
 );  
 //addEventListener第二個參數能夠傳一個對象，會調用該對象的handleEvent屬性 
 
 } 
 
 }; 
 
 slider.init(); 
 
 </script> 
 
 </body> 
 
 </html> 
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。