小強的HTML5行動開發之路（52）－jquerymobile中的觸控交互
- 黄舟原創
- 2017-02-15 14:00:161520瀏覽
當使用行動裝置進行觸控操作時，最常用的就是輕擊、按住螢幕或手勢操作，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>
<p class="content" data-role="content">
轻击页面进入下一页<br/>
按住不放，打开关于对话框
</p>
<footer data-role="footer"></footer>
</section>
<section id="page2" data-role="page">
<header data-role="header">
<h1>Tap事件处理</h1>
</header>
<p class="content" data-role="content">
轻击页面返回前一页
</p>
<footer data-role="footer">
</footer>
</section>
<p id="abut" data-role="dialog">
<p data-role="header">
<h1>关于本程序</h1>
</p>
<p data-role="content">
演示轻击触控事件响应
</p>
</p>
</body>
</html>tap：輕擊事件
tap：輕擊事件
:？二、輕掃輕掃是指用手指或手寫筆快速在螢幕上向左或向右快速滑動，會觸發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>
<p class="content" data-role="content">
向右滑动页面进入下一页<br/>
向左滑动页面，打开关于对话框
</p>
<footer data-role="footer"></footer>
</section>
<section id="page2" data-role="page">
<header data-role="header">
<h1>swipe事件处理</h1>
</header>
<p class="content" data-role="content">
向右滑动页面进入前一页br/>
向左滑动页面，打开关于对话框
</p>
<footer data-role="footer">
</footer>
</section>
<p id="abut" data-role="dialog">
<p data-role="header">
<h1>关于本程序</h1>
</p>
<p data-role="content">
演示swipeleft&swiperight触控事件响应
</p>
</p>
<a id="lnkDialog" href="#about" data-rel="dialog" data-transition="pop" style="display:none;"></a>
</body>
</html>上面程式碼中用到了一個技巧，在介面切換過程中如果需要改變切換效果，則必須使用超級連結了實現，將該連結的display屬性設為none，在監聽函數中呼叫click( )方法執行介面切換，然後在連結中加入data-transition進行切換效果設定。
| 含義 | oseout |
| 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>
<p class="content" data-role="content">
轻击页面，显示点击位置
</p>
<p style="height: 500px;"></p>
内容底部
<footer data-role="footer"></footer>
</section>
</body>
</html> | 以上就是小強的HTML5行動開發之路（52）－jquerymobile中的觸控互動的內容，更多相關內容請關注PHP中文網（www.php.cn）！ |
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn