標籤：jquery mobile html5 觸控 互動
當使用行動裝置進行觸控操作時，最常用的就是輕擊、按住螢幕或者手勢操作，jQuery Mobile可以通過綁定的觸控事件來響應使用者的特定觸控行為。
一、輕擊與按住
直接上代碼（一切皆在代碼中，細細品吧！）
<!DOCTYPE html><html><head><title>練習</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" /><link href="css/jquery.mobile-1.0.1.min.css" rel="stylesheet" type="text/css"/><script src="js/jquery-1.6.4.js" type="text/javascript" ></script><script src="js/jquery.mobile-1.0.1.js" type="text/javascript" ></script><script type="text/javascript">$(‘#page1‘).live(‘tap‘, function(){$.mobile.changePage(‘#page2‘);});$(‘#page2‘).live(‘tap‘, function(){$.mobile.changePage(‘#page1‘);});$(‘#page1‘).live(‘taphold‘, function(){alert(‘taphold事件被觸發‘);});$(‘#page2‘).live(‘taphold‘, function(){$.mobile.changePage(‘#about‘);});</script></head><body><section id="page1" data-role="page"><header data-role="header"><h1>Tap事件處理</h1></header><div class="content" data-role="content">輕擊頁面進入下一頁<br/>按住不放，開啟關於對話方塊</div><footer data-role="footer"></footer></section><section id="page2" data-role="page"><header data-role="header"><h1>Tap事件處理</h1></header><div class="content" data-role="content">輕擊頁面返回前一頁</div><footer data-role="footer"></footer></section><div id="abut" data-role="dialog"><div data-role="header"><h1>關於本程式</h1></div><div data-role="content">示範輕擊觸控事件響應</div></div></body></html>tap：輕擊事件
taphold:按住事件
二、輕掃
輕掃是指用手指或手寫筆快速在螢幕上向左或向右快速滑動，會觸發swipeleft事件或者swiperight事件。
<!DOCTYPE html><html><head><title>練習</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" /><link href="css/jquery.mobile-1.0.1.min.css" rel="stylesheet" type="text/css"/><script src="js/jquery-1.6.4.js" type="text/javascript" ></script><script src="js/jquery.mobile-1.0.1.js" type="text/javascript" ></script><script type="text/javascript">$(‘#page1‘).live(‘swiperight‘, function(){$.mobile.changePage(‘#page2‘);});$(‘#page2‘).live(‘swiperight‘, function(){$.mobile.changePage(‘#page1‘);});$(‘#page1‘).live(‘swipeleft‘, function(){$(‘#lnkDialog‘).click();});$(‘#page2‘).live(‘swiperleft‘, function(){$.mobile.changePage(‘#about‘);});</script></head><body><section id="page1" data-role="page"><header data-role="header"><h1>swipe事件處理</h1></header><div class="content" data-role="content">向右滑動頁面進入下一頁<br/>向左滑動頁面，開啟關於對話方塊</div><footer data-role="footer"></footer></section><section id="page2" data-role="page"><header data-role="header"><h1>swipe事件處理</h1></header><div class="content" data-role="content">向右滑動頁面進入前一頁br/>向左滑動頁面，開啟關於對話方塊</div><footer data-role="footer"></footer></section><div id="abut" data-role="dialog"><div data-role="header"><h1>關於本程式</h1></div><div data-role="content">示範swipeleft&swiperight觸控事件響應</div></div><a id="lnkDialog" href="#about" data-rel="dialog" data-transition="pop" style="display:none;"></a></body></html>上面代碼中用到了一個技巧，在介面切換過程中如果需要改變轉場效果，則必須使用超級連結了實現，將該連結的display屬性設為none，在監聽函數中調用click()方法執行介面切換，然後在連結中添加data-transition進行轉場效果設定。
三、虛擬滑鼠事件
| 事件 | 含義 |
| vmouseover | 觸控或者滑動DOM容器之上 |
| vmoseout | 觸控或者滑動離開 |
| vmousedown | 觸摸或者按下 |
| vmoseup | 觸摸結束或者滑鼠按鍵釋放 |
| vclick | 觸摸結束或滑鼠按鍵被釋放 |
| vclick事件通常在vmouseup事件後300ms觸發 | |
| vmousecancel | 觸控事件中發起mousecancel事件時觸發 |
| ...... | ...... |
| ...... | ...... |
<!DOCTYPE html><html><head><title>練習</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" /><link href="css/jquery.mobile-1.0.1.min.css" rel="stylesheet" type="text/css"/><script src="js/jquery-1.6.4.js" type="text/javascript" ></script><script src="js/jquery.mobile-1.0.1.js" type="text/javascript" ></script><script type="text/javascript">$(‘#page1‘).live(‘vmouseup‘, function(event, ui){alert("當前點擊位置" + "\n" +"\npageX:" + event.pageX + //當前HTML頁面橫座標"\npageY:" + event.pageY + //當前HTML頁面縱座標"\nscreenX:" + event.screenX + //當前螢幕橫座標"\nscreenY:" + event.screenY + //當前螢幕縱座標"\nclientX:" + event.clientX + //當前視窗地區橫座標"\nclientY:" + event.clientY); //當前視窗地區縱座標});</script></head><body><section id="page1" data-role="page"><header data-role = "header"><h1>vMouse事件處理</h1></header><div class="content" data-role="content">輕擊頁面，顯示點擊位置</div><div style="height: 500px;"></div>內容底部<footer data-role="footer"></footer></section></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
