首頁 > 開發者 > JavaScript
以下經過本人測試成功。
測試平台：三星S5830I
作業系統：Android 2.3.6
瀏覽器：UC瀏覽器
HTML標準：HTML5
測試了三個事件：touchstart、touchmove 和 touchend，並擷取了觸摸時觸點在頁面上的座標，根據座標進行了左右滑動、上下滑動判斷。
代碼如下：
<!-- HTML5 --><!DOCTYPE html><html> <head> <title>TouchEvent測試</title> <meta charset="gbk"> </head> <body> <h2>TouchEvent測試</h2> <br /> <div id="version" style="border:2px solid black;background-color:yellow"></div> <br /> <br /> <br /> <br /> <br /> <br /> <div id="result" style="border:2px solid red; color:red;">未觸發事件！</div> <div id="test" style="border:2px solid red"> <ul> <li id="li1">測試條目1</li> <li id="li2">測試條目2</li> <li id="li3">測試條目3</li> <li id="li4">測試條目4</li> <li id="li5">測試條目5</li> <li id="li6">測試條目6</li> <li id="li7">測試條目7</li> <li id="li8">測試條目8</li> <li id="li9">測試條目9</li> <li id="li10">測試條目10</li> <li id="li11">測試條目11</li> <li id="li12">測試條目12</li> <li id="li13">測試條目13</li> <li id="li14">測試條目14</li> <li id="li15">測試條目15</li> <li id="li16">測試條目16</li> <li id="li17">測試條目17</li> <li id="li18">測試條目18</li> <li id="li19">測試條目19</li> <li id="li20">測試條目20</li> </ul> </div> <script type="text/javascript"> //全域變數，觸摸開始位置 var startX = 0, startY = 0; //touchstart事件 function touchSatrtFunc(evt) { try { //evt.preventDefault(); //阻止觸摸時瀏覽器的縮放、捲軸滾動等 var touch = evt.touches[0]; //擷取第一個觸點 var x = Number(touch.pageX); //頁面觸點X座標 var y = Number(touch.pageY); //頁面觸點Y座標 //記錄觸點初始位置 startX = x; startY = y; var text = 'TouchStart事件觸發：（' + x + ', ' + y + '）'; document.getElementById("result").innerHTML = text; } catch (e) { alert('touchSatrtFunc：' + e.message); } } //touchmove事件，這個事件無法擷取座標 function touchMoveFunc(evt) { try { //evt.preventDefault(); //阻止觸摸時瀏覽器的縮放、捲軸滾動等 var touch = evt.touches[0]; //擷取第一個觸點 var x = Number(touch.pageX); //頁面觸點X座標 var y = Number(touch.pageY); //頁面觸點Y座標 var text = 'TouchMove事件觸發：（' + x + ', ' + y + '）'; //判斷滑動方向 if (x - startX != 0) { text += '<br/>左右滑動'; } if (y - startY != 0) { text += '<br/>上下滑動'; } document.getElementById("result").innerHTML = text; } catch (e) { alert('touchMoveFunc：' + e.message); } } //touchend事件 function touchEndFunc(evt) { try { //evt.preventDefault(); //阻止觸摸時瀏覽器的縮放、捲軸滾動等 var text = 'TouchEnd事件觸發'; document.getElementById("result").innerHTML = text; } catch (e) { alert('touchEndFunc：' + e.message); } } //綁定事件 function bindEvent() { document.addEventListener('touchstart', touchSatrtFunc, false); document.addEventListener('touchmove', touchMoveFunc, false); document.addEventListener('touchend', touchEndFunc, false); } //判斷是否支援觸摸事件 function isTouchDevice() { document.getElementById("version").innerHTML = navigator.appVersion; try { document.createEvent("TouchEvent"); alert("支援TouchEvent事件！"); bindEvent(); //綁定事件 } catch (e) { alert("不支援TouchEvent事件！" + e.message); } } window.onload = isTouchDevice; </script> </body></html>
下面是jQuery Mobile實現上下滑動的方式：
jQuery Mobile左右滑動事件：swipe（水平滑動30px以上時觸發）、swipeLeft（向左滑）、swipeRight（向右滑）
jQuery Mobile垂直滑動事件：scrollstart（上下滾動）、scrollend（滾動停止）
jQuery Mobile觸摸點擊事件：tap（快速觸碰）、taphold（觸碰並保持750ms以上觸發）
<!DOCTYPE html><html> <head> <title>Ajax測試</title> <meta charset="gbk"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="jquery-mobile/jquery.mobile-1.2.0.min.css"/> <link rel="stylesheet" href="jquery-mobile/jquery.mobile.structure-1.2.0.min.css"/> <script src="jquery-mobile/jquery-1.8.2.min.js"></script> <script src="jquery-mobile/jquery.mobile-1.2.0.min.js"></script> </head> <body> <div data-role="page" data-theme="b"> <div data-role="header"></div> <div data-role="content"> <script>//scrollstart事件function scrollstartFunc(evt) {try{var target = $(evt.target);while (target.attr("id") == undefined) {target = target.parent();}//擷取觸點目標id屬性值var targetId = target.attr("id");alert("targetId: " + targetId);}catch (e) {alert('myscrollfunc：' + e.message);}}function myinit() {//綁定上下滑動事件$("#myul").bind('scrollstart', function () { scrollstartFunc(event); });}window.onload = myinit;</script><!-- listview測試 --><ul id="myul" data-role="listview" data-inset="true"><li data-role="list-divider">資訊列表</li><li id="li1" data-role="fieldcontain">資訊1</li><li id="li2" data-role="fieldcontain">資訊2</li><li id="li3" data-role="fieldcontain">資訊3</li><li id="li4" data-role="fieldcontain">資訊4</li><li id="li5" data-role="fieldcontain">資訊5</li><li id="li6" data-role="fieldcontain">資訊6</li><li id="li7" data-role="fieldcontain">資訊7</li><li id="li8" data-role="fieldcontain">資訊8</li><li id="li9" data-role="fieldcontain">資訊9</li><li id="li10" data-role="fieldcontain">資訊10</li></ul> </div> </body></html>
歡迎轉載，歡迎批評指正！
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
