手機瀏覽器支持三個事件：touchstart、touchmove 和 touchend，並獲取了觸摸時觸點在頁面上的坐標，根據坐標進行了左右滑動、上下滑動判斷。
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以上觸發）
<!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>