html5 touch恶性事件完成触摸屏网页页面左右拖动

日期：2021-02-27 类型：科技新闻 

关键词：开发一个小程序多少钱，凡科轻站小程序，微信群抽奖小程序，小程序登录页面，微信小程序 微店

近期做的做那个app的新项目因为用overflow：hidden致使了许多难题，因而决策科学研究下html5的touch恶性事件。想找个全面点的帖子很难，尽管许多有关html5 touch的文章内容但大多数全是详细介绍touch恶性事件或很简洁明了的小demo。
较为全面的左右拖动的小demo，编码较为简易。

下面是详细编码，我把几个关键的地区做了鲜红色标识

XML/HTML Code拷贝內容到剪贴板
  1. <!doctype html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF⑻">  
  5.     <meta name="viewport" content="width=device-width,initial-scale=1 user-scalable=0"/>  
  6.     <title>2014⑷⑵9</title>  
  7.     <style>  
  8.     * {margin: 0;  padding: 0;}   
  9.     #outer{ width:90%; height: 490px; background: #000; margin: auto;  overflow: hidden;}   
  10.     #inner{width:80%; height: 2000px; background: #f67d42; margin: auto; position:relative; top:0;  }   
  11.     </style>  
  12.     <script src='jquery⑴.9.1.min.js'></script>  
  13. </head>  
  14. <body>  
  15.   
  16. <div id="spText"></div>  
  17.     <div id="outer">  
  18.         <div id="inner">  
  19.         123<br>        123<br>    gag<br> af<br> 123<br> 123<br> 123<br> 123<br> 123<br> 123<br> 123<br> 123<br> 123<br> 123<br> 123<br> yryyr<br> ryry<br> 123<br> 123<br> 123<br> 123<br> 123<br> sdff<br> fef<br> 123<br> hr<br> hrh<br> 5y<br> 123<br> er<br> ert<br> 123<br> rgdgdg<br> 123<br> 123<br> 123<br> 123<br> 123<br> 123<br> gfgfgfgfgfgf<br> sdsdsdsdsdsd<br> sf<br> 123<br> 123<br> 123<br> 123<br> 123<br> 123<br> 123<br> 123<br> gdggdgdg<br> 123<br> drgdrgd<br> 123<br> 123<br> 123<br> yuyuyuyuyuy<br> hjkhjkhkhkhjkhkh<br> kjkjk<br>123<br>      123<br>    gag<br> af<br> 123<br> 123<br> 123<br> 123<br> 123<br> 123<br> 123<br> 123<br> 123<br> 123<br> 123<br> yryyr<br> ryry<br> 123<br> 123<br> 123<br> 123<br> 123<br> sdff<br> fef<br> 123<br> hr<br> hrh<br> 5y<br> 123<br> er<br> ert<br> 123<br> rgdgdg<br> 123<br> 123<br> 123<br> 123<br> 123<br> 123<br> gfgfgfgfgfgf<br> sdsdsdsdsdsd<br> sf<br> 123<br> 123<br> 123<br> 123<br> 123<br> 123<br> 123<br> 123<br> gdggdgdg<br> 123<br> drgdrgd<br> 123<br> 123<br> 123<br> yuyuyuyuyuy<br> hjkhjkhkhkhjkhkh<br> kjkjk<br>         
  20.         </div>  
  21.     </div>  
  22.   
  23.     <script>  
  24.         var startX,//触碰时的座标   
  25.             startY,   
  26.              x, //拖动的间距   
  27.              y,   
  28.              aboveY=0; //设1个全局性自变量纪录上1次內部块拖动的部位    
  29.   
  30.          var inner=document.getElementById("inner");   
  31.             
  32.             function touchSatrt(e){//触碰   
  33.                 e.preventDefault();   
  34.                 var touch=e.touches[0];   
  35.                 startY = touch.pageY;   //刚触碰时的座标                 
  36.             }   
  37.   
  38.             function touchMove(e){//拖动             
  39.                  e.preventDefault();           
  40.                  var  touch = e.touches[0];                  
  41.                  y = touch.pageY - startY;//拖动的间距   
  42.                 //inner.style.webkitTransform = 'translate(' + 0+ 'px, ' + y + 'px)';  //还可以用css3的方法        
  43.                 inner.style.top=aboveY+y+"px"; //这1句中的aboveY是inner之前拖动后的部位                      
  44.             }     
  45.   
  46.             function touchEnd(e){//手指离去显示屏   
  47.               e.preventDefault();                      
  48.               aboveY=parseInt(inner.style.top);//touch完毕续篇录內部滑块拖动的部位 在全局性自变量中反映 1定要用parseInt()将其转换为整数金额字;   
  49.   
  50.             }//   
  51.              document.getElementById("outer").addEventListener('touchstart', touchSatrt,false);     
  52.              document.getElementById("outer").addEventListener('touchmove', touchMove,false);     
  53.              document.getElementById("outer").addEventListener('touchend', touchEnd,false);     
  54.     </script>  
  55. </body>  
  56.   
  57. </html>  

以上便是本文的所有內容，期待对大伙儿的学习培训有一定的协助。

原文：http://www.cnblogs.com/leinov/p/3701951.html

上一篇：电子商务平台有什么—【洛阳小程序制作】 返回下一篇：没有了