碼上歡樂
相關內容    簡體    繁體

移動設備、手機瀏覽器Javascript滑動事件代碼

本文轉載自   查看原文   2014-01-20 09:39   5550    前台jQuery/ Phonegap/jQueryMobile

以下經過本人測試成功。

測試平台：三星S5830I

操作系統：Android 2.3.6

瀏覽器：UC瀏覽器

HTML標准：HTML5

 

測試了三個事件：touchstart、touchmove 和 touchend，並獲取了觸摸時觸點在頁面上的坐標，根據坐標進行了左右滑動、上下滑動判斷。

代碼如下：

[html] view plain copy
  1. <!-- HTML5 -->  
  2. <!DOCTYPE html>  
  3. <html>  
  4.     <head>  
  5.         <title>TouchEvent測試</title>  
  6.         <meta charset="gbk">  
  7.     </head>  
  8.     <body>  
  9.         <h2>TouchEvent測試</h2>  
  10.         <br />  
  11.         <div id="version" style="border:2px solid black;background-color:yellow"></div>  
  12.         <br />  
  13.         <br />  
  14.         <br />  
  15.         <br />  
  16.         <br />  
  17.         <br />  
  18.         <div id="result" style="border:2px solid red; color:red;">未觸發事件！</div>  
  19.         <div id="test" style="border:2px solid red">  
  20.             <ul>  
  21.                 <li id="li1">測試條目1</li>  
  22.                 <li id="li2">測試條目2</li>  
  23.                 <li id="li3">測試條目3</li>  
  24.                 <li id="li4">測試條目4</li>  
  25.                 <li id="li5">測試條目5</li>  
  26.                 <li id="li6">測試條目6</li>  
  27.                 <li id="li7">測試條目7</li>  
  28.                 <li id="li8">測試條目8</li>  
  29.                 <li id="li9">測試條目9</li>  
  30.                 <li id="li10">測試條目10</li>  
  31.                 <li id="li11">測試條目11</li>  
  32.                 <li id="li12">測試條目12</li>  
  33.                 <li id="li13">測試條目13</li>  
  34.                 <li id="li14">測試條目14</li>  
  35.                 <li id="li15">測試條目15</li>  
  36.                 <li id="li16">測試條目16</li>  
  37.                 <li id="li17">測試條目17</li>  
  38.                 <li id="li18">測試條目18</li>  
  39.                 <li id="li19">測試條目19</li>  
  40.                 <li id="li20">測試條目20</li>  
  41.             </ul>  
  42.         </div>  
  43.           
  44.         <script type="text/javascript">  
  45.             //全局變量，觸摸開始位置  
  46.             var startX = 0, startY = 0;  
  47.               
  48.             //touchstart事件  
  49.             function touchSatrtFunc(evt) {  
  50.                 try  
  51.                 {  
  52.                     //evt.preventDefault(); //阻止觸摸時瀏覽器的縮放、滾動條滾動等  
  53.   
  54.                     var touch = evt.touches[0]; //獲取第一個觸點  
  55.                     var x = Number(touch.pageX); //頁面觸點X坐標  
  56.                     var y = Number(touch.pageY); //頁面觸點Y坐標  
  57.                     //記錄觸點初始位置  
  58.                     startX = x;  
  59.                     startY = y;  
  60.   
  61.                     var text = 'TouchStart事件觸發：（' + x + ', ' + y + '）';  
  62.                     document.getElementById("result").innerHTML = text;  
  63.                 }  
  64.                 catch (e) {  
  65.                     alert('touchSatrtFunc：' + e.message);  
  66.                 }  
  67.             }  
  68.   
  69.             //touchmove事件，這個事件無法獲取坐標  
  70.             function touchMoveFunc(evt) {  
  71.                 try  
  72.                 {  
  73.                     //evt.preventDefault(); //阻止觸摸時瀏覽器的縮放、滾動條滾動等  
  74.                     var touch = evt.touches[0]; //獲取第一個觸點  
  75.                     var x = Number(touch.pageX); //頁面觸點X坐標  
  76.                     var y = Number(touch.pageY); //頁面觸點Y坐標  
  77.   
  78.                     var text = 'TouchMove事件觸發：（' + x + ', ' + y + '）';  
  79.   
  80.                     //判斷滑動方向  
  81.                     if (x - startX != 0) {  
  82.                         text += '<br/>左右滑動';  
  83.                     }  
  84.                     if (y - startY != 0) {  
  85.                         text += '<br/>上下滑動';  
  86.                     }  
  87.   
  88.                     document.getElementById("result").innerHTML = text;  
  89.                 }  
  90.                 catch (e) {  
  91.                     alert('touchMoveFunc：' + e.message);  
  92.                 }  
  93.             }  
  94.   
  95.             //touchend事件  
  96.             function touchEndFunc(evt) {  
  97.                 try {  
  98.                     //evt.preventDefault(); //阻止觸摸時瀏覽器的縮放、滾動條滾動等  
  99.   
  100.                     var text = 'TouchEnd事件觸發';  
  101.                     document.getElementById("result").innerHTML = text;  
  102.                 }  
  103.                 catch (e) {  
  104.                     alert('touchEndFunc：' + e.message);  
  105.                 }  
  106.             }  
  107.   
  108.             //綁定事件  
  109.             function bindEvent() {  
  110.                 document.addEventListener('touchstart', touchSatrtFunc, false);  
  111.                 document.addEventListener('touchmove', touchMoveFunc, false);  
  112.                 document.addEventListener('touchend', touchEndFunc, false);  
  113.             }  
  114.   
  115.             //判斷是否支持觸摸事件  
  116.             function isTouchDevice() {  
  117.                 document.getElementById("version").innerHTML = navigator.appVersion;  
  118.   
  119.                 try {  
  120.                     document.createEvent("TouchEvent");  
  121.                     alert("支持TouchEvent事件！");  
  122.   
  123.                     bindEvent(); //綁定事件  
  124.                 }  
  125.                 catch (e) {  
  126.                     alert("不支持TouchEvent事件！" + e.message);  
  127.                 }  
  128.             }  
  129.   
  130.             window.onload = isTouchDevice;  
  131.     </script>  
  132.     </body>  
  133. </html>  

 

下面是jQuery Mobile實現上下滑動的方式：

jQuery Mobile左右滑動事件：swipe（水平滑動30px以上時觸發）、swipeLeft（向左滑）、swipeRight（向右滑）

jQuery Mobile垂直滑動事件：scrollstart（上下滾動）、scrollend（滾動停止）

jQuery Mobile觸摸點擊事件：tap（快速觸碰）、taphold（觸碰並保持750ms以上觸發）

 

[html] view plain copy
  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <title>Ajax測試</title>  
  5.         <meta charset="gbk">  
  6.         <meta name="viewport" content="width=device-width, initial-scale=1">  
  7.         <link rel="stylesheet" href="jquery-mobile/jquery.mobile-1.2.0.min.css"/>  
  8.         <link rel="stylesheet" href="jquery-mobile/jquery.mobile.structure-1.2.0.min.css"/>  
  9.         <script src="jquery-mobile/jquery-1.8.2.min.js"></script>  
  10.         <script src="jquery-mobile/jquery.mobile-1.2.0.min.js"></script>  
  11.     </head>  
  12.     <body>  
  13.         <div data-role="page" data-theme="b">  
  14.         <div data-role="header"></div>  
  15.         <div data-role="content">  
  16.             <script>  
  17.                 //scrollstart事件  
  18.                 function scrollstartFunc(evt) {  
  19.                     try  
  20.                     {  
  21.                         var target = $(evt.target);  
  22.                         while (target.attr("id") == undefined) {  
  23.                             target = target.parent();  
  24.                         }  
  25.                         //獲取觸點目標id屬性值  
  26.                         var targetId = target.attr("id");  
  27.   
  28.                         alert("targetId: " + targetId);  
  29.                     }  
  30.                     catch (e) {  
  31.                         alert('myscrollfunc：' + e.message);  
  32.                     }  
  33.                 }  
  34.   
  35.                 function myinit() {  
  36.                     //綁定上下滑動事件  
  37.                     $("#myul").bind('scrollstart', function () { scrollstartFunc(event); });  
  38.                 }  
  39.   
  40.                 window.onload = myinit;  
  41.             </script>  
  42.   
  43.             <!-- listview測試 -->  
  44.             <ul id="myul" data-role="listview" data-inset="true">  
  45.                 <li data-role="list-divider">信息列表</li>  
  46.                 <li id="li1" data-role="fieldcontain">信息1</li>  
  47.                 <li id="li2" data-role="fieldcontain">信息2</li>  
  48.                 <li id="li3" data-role="fieldcontain">信息3</li>  
  49.                 <li id="li4" data-role="fieldcontain">信息4</li>  
  50.                 <li id="li5" data-role="fieldcontain">信息5</li>  
  51.                 <li id="li6" data-role="fieldcontain">信息6</li>  
  52.                 <li id="li7" data-role="fieldcontain">信息7</li>  
  53.                 <li id="li8" data-role="fieldcontain">信息8</li>  
  54.                 <li id="li9" data-role="fieldcontain">信息9</li>  
  55.                 <li id="li10" data-role="fieldcontain">信息10</li>  
  56.             </ul>  
  57.         </div>  
  58.     </body>  
  59. </html>  


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 [javascript] 解決移動端手機瀏覽器軟鍵盤遮擋輸入框問題 在PC上測試移動端網站和模擬手機瀏覽器的5大方法 手機瀏覽器都是按照什么分辨率解析移動端網頁的 JS監聽手機端瀏覽器的后退按鈕的事件方法 HTML5 瀏覽器返回按鈕/手機返回按鈕事件監聽 怎樣判斷當前瀏覽器是PC瀏覽器還是手機瀏覽器 微信瀏覽器返回刷新，監聽微信瀏覽器返回事件，網頁防復制，移動端禁止圖片長按和vivo手機點擊img標簽放大圖片 讓你的 vs code 跑在雲上，用手機瀏覽器就能寫代碼 pc/移動端（手機端）瀏覽器的直播rtmp hls（適合入門者快速上手） 手機瀏覽器跳轉APP
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM