当使用移动设备进行触控操作时，最常用的就是轻击、按住屏幕或者手势操作，jQuery Mobile可以通过绑定的触控事件来响应使用者的特定触控行为。

一、轻击与按住

直接上代码（一切皆在代码中，细细品吧！）

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>练习</title>
  5. <meta charset="utf-8">
  6. <meta name="viewport" content="width=device-width,
  7.       initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" />
  8. <link href="css/jquery.mobile-1.0.1.min.css"
  9.       rel="stylesheet" type="text/css"/>
  10. <script src="js/jquery-1.6.4.js"
  11.       type="text/javascript" ></script>
  12. <script src="js/jquery.mobile-1.0.1.js"
  13.       type="text/javascript" ></script>
  14. <script type="text/javascript">
  15. 	$('#page1').live('tap', function(){
  16. 		$.mobile.changePage('#page2');
  17. 	});
  18. 	$('#page2').live('tap', function(){
  19. 		$.mobile.changePage('#page1');
  20. 	});
  21. 	$('#page1').live('taphold', function(){
  22. 		alert('taphold事件被触发');
  23. 	});
  24. 	$('#page2').live('taphold', function(){
  25. 		$.mobile.changePage('#about');
  26. 	});
  27. </script>
  28. </head>
  29. <body>
  30. 	<section id="page1" data-role="page">
  31. 		<header data-role="header">
  32. 			<h1>Tap事件处理</h1>
  33. 		</header>
  34. 		<div class="content" data-role="content">
  35. 			轻击页面进入下一页<br/>
  36. 			按住不放，打开关于对话框
  37. 		</div>
  38. 		<footer data-role="footer"></footer>
  39. 	</section>
  40. 	<section id="page2" data-role="page">
  41. 		<header data-role="header">
  42. 			<h1>Tap事件处理</h1>
  43. 		</header>
  44. 		<div class="content" data-role="content">
  45. 			轻击页面返回前一页
  46. 		</div>
  47. 		<footer data-role="footer">
  48. 		</footer>
  49. 	</section>
  50. 	<div id="abut" data-role="dialog">
  51. 		<div data-role="header">
  52. 			<h1>关于本程序</h1>
  53. 		</div>
  54. 		<div data-role="content">
  55. 			演示轻击触控事件响应
  56. 		</div>
  57. 	</div>
  58. </body>
  59. </html>

tap：轻击事件

taphold:按住事件

二、轻扫

轻扫是指用手指或手写笔快速在屏幕上向左或向右快速滑动，会触发swipeleft事件或者swiperight事件。

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>练习</title>
  5. <meta charset="utf-8">
  6. <meta name="viewport" content="width=device-width,
  7.       initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" />
  8. <link href="css/jquery.mobile-1.0.1.min.css"
  9.       rel="stylesheet" type="text/css"/>
  10. <script src="js/jquery-1.6.4.js"
  11.       type="text/javascript" ></script>
  12. <script src="js/jquery.mobile-1.0.1.js"
  13.       type="text/javascript" ></script>
  14. <script type="text/javascript">
  15. 	$('#page1').live('swiperight', function(){
  16. 		$.mobile.changePage('#page2');
  17. 	});
  18. 	$('#page2').live('swiperight', function(){
  19. 		$.mobile.changePage('#page1');
  20. 	});
  21. 	$('#page1').live('swipeleft', function(){
  22. 		$('#lnkDialog').click();
  23. 	});
  24. 	$('#page2').live('swiperleft', function(){
  25. 		$.mobile.changePage('#about');
  26. 	});
  27. </script>
  28. </head>
  29. <body>
  30. 	<section id="page1" data-role="page">
  31. 		<header data-role="header">
  32. 			<h1>swipe事件处理</h1>
  33. 		</header>
  34. 		<div class="content" data-role="content">
  35. 			向右滑动页面进入下一页<br/>
  36. 			向左滑动页面，打开关于对话框
  37. 		</div>
  38. 		<footer data-role="footer"></footer>
  39. 	</section>
  40. 	<section id="page2" data-role="page">
  41. 		<header data-role="header">
  42. 			<h1>swipe事件处理</h1>
  43. 		</header>
  44. 		<div class="content" data-role="content">
  45. 			向右滑动页面进入前一页br/>
  46. 			向左滑动页面，打开关于对话框
  47. 		</div>
  48. 		<footer data-role="footer">
  49. 		</footer>
  50. 	</section>
  51. 	<div id="abut" data-role="dialog">
  52. 		<div data-role="header">
  53. 			<h1>关于本程序</h1>
  54. 		</div>
  55. 		<div data-role="content">
  56. 			演示swipeleft&swiperight触控事件响应
  57. 		</div>
  58. 	</div>
  59. 	<a id="lnkDialog" href="#about" data-rel="dialog" data-transition="pop" style="display:none;"></a>
  60. </body>
  61. </html>

上面代码中用到了一个技巧，在界面切换过程中如果需要改变切换效果，则必须使用超级链接了实现，将该链接的display属性设为none，在监听函数中调用click()方法执行界面切换，然后在链接中添加data-transition进行切换效果设置。

三、虚拟鼠标事件

事件 含义
vmouseover 触控或者滑动DOM容器之上
vmoseout 触控或者滑动离开
vmousedown 触摸或者按下
vmoseup 触摸结束或者鼠标按键释放
vclick 触摸结束或鼠标按键被释放
  vclick事件通常在vmouseup事件后300ms触发
vmousecancel 触控事件中发起mousecancel事件时触发
...... ......
...... ...... 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>练习</title>
  5. <meta charset="utf-8">
  6. <meta name="viewport" content="width=device-width,
  7.       initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" />
  8. <link href="css/jquery.mobile-1.0.1.min.css"
  9.       rel="stylesheet" type="text/css"/>
  10. <script src="js/jquery-1.6.4.js"
  11.       type="text/javascript" ></script>
  12. <script src="js/jquery.mobile-1.0.1.js"  type="text/javascript" ></script>
  13. <script type="text/javascript">
  14. 	$('#page1').live('vmouseup', function(event, ui){
  15. 		alert("当前点击位置" + "\n" +
  16. 			"\npageX:" + event.pageX +   //当前HTML页面横坐标
  17. 			"\npageY:" + event.pageY +   //当前HTML页面纵坐标
  18. 			"\nscreenX:" + event.screenX +  //当前屏幕横坐标
  19. 			"\nscreenY:" + event.screenY +  //当前屏幕纵坐标
  20. 			"\nclientX:" + event.clientX +  //当前窗口区域横坐标
  21. 			"\nclientY:" + event.clientY);  //当前窗口区域纵坐标
  22. 	});
  23. </script>
  24. </head>
  25. <body>
  26. 	<section id="page1" data-role="page">
  27. 		<header data-role = "header">
  28. 			<h1>vMouse事件处理</h1>
  29. 		</header>
  30. 		<div class="content" data-role="content">
  31. 			轻击页面，显示点击位置
  32. 		</div>
  33. 		<div style="height: 500px;"></div>
  34. 		内容底部
  35. 		<footer data-role="footer"></footer>
  36. 	</section>
  37. </body>
  38. </html>

小强的HTML5移动开发之路（52）——jquerymobile中的触控交互的更多相关文章

  1. 小强的HTML5移动开发之路（18）——HTML5地理定位

    来自:http://blog.csdn.net/dawanganban/article/details/18192091 在前面的<小强的HTML5移动开发之路(2)--HTML5的新特性> ...

  2. 小强的HTML5移动开发之路（14）——Video标签详解

    来自:http://blog.csdn.net/dawanganban/article/details/18180605 在前面的小强的HTML5移动开发之路(5)--制作一个漂亮的视频播放器中制作了 ...

  3. 小强的HTML5移动开发之路（13）——HTML5中的全局属性

    来自:http://blog.csdn.net/dawanganban/article/details/18179483 一.accssskey  快捷键 <!DOCTYPE HTML> ...

  4. 小强的HTML5移动开发之路（11）——链接，图片，表格，框架

    来自:http://blog.csdn.net/dawanganban/article/details/18098193 一.HTML是什么? HTML(hypertext mark-uplangua ...

  5. 小强的HTML5移动开发之路（42）——HTML4与HTML5文档结构比较

    一般来说,人们在书写包括HTML在内的文档时,习惯上按照类似于"章--节--小节"这样的层次结构来进行. 在HTML4中的描述方式: <html> <head&g ...

  6. 小强的HTML5移动开发之路（37）——jqMobi快速入门

    在<小强的HTML5移动开发之路(33)-- jqMobi基础>中我们了解了什么是jqMobi,并从官方下载了jqMobi开发包,下载后解压目录如下: 拷贝上面的/css目录./plugi ...

  7. 小强的HTML5移动开发之路（12）——从一个多媒体标签说起

    来自:http://blog.csdn.net/dawanganban/article/details/18136813 一.视频播放 <html> <head> <ti ...

  8. 小强的HTML5移动开发之路（3）——HTML5与HTML4比较

    来自:http://blog.csdn.net/dawanganban/article/details/17652873 在前面介绍了HTML5的新特性,新标签的使用,智能表单设计,引入多媒体对象,C ...

  9. 小强的HTML5移动开发之路（1）——HTML介绍

    来自:http://blog.csdn.net/dawanganban/article/details/17591373 HTML是HyperText Markup Language(超文本标记语言) ...

随机推荐

  1. 关于mybatis里面的Executor--转载

    原文地址:http://blog.csdn.net/w_intercool/article/details/7893344 使用mybatis查寻数据,跟踪其执行流程 最开始执行的语句 this.ge ...

  2. CSS笔记 - SVG Polyline 图片绘制动画边框

    <style> div{ width: 420px; height: 200px; background: url('./img/timg.jpg') no-repeat; } polyl ...

  3. 【Codeforces Round #455 (Div. 2) B】Segments

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 处理出所有的线 其实就是区间. 总共有n*(n+1)/2个 然后按照左端点.右端点排序 每次取最左边的线. 多种可能就取右端点尽量小 ...

  4. Android怎样实现毛玻璃效果之Android高级模糊技术

    自从iOS系统引入了Blur效果,也就是所谓的毛玻璃.模糊化效果.磨砂效果.各大系统就開始竞相模仿,这是如何的一个效果呢,我们先来看一下,如以下的图片: 效果我们知道了,怎样在Android中实现呢. ...

  5. rhel5安装 oracle10

    readhat 安装11gr2文档 需要注意的地方:必须关掉的 1,防火墙:2,SElinux . root 用户运行  setup  命令可关防火墙与SElinux 修改网络配置文件,一定要重启此文 ...

  6. 使用 STL 辅助解决算法问题

    不要重复制造轮子,而且你造的轮子未必比得上别人的: <numeric>⇒ accumulate,累积容器中区间的和,可以指定初值: 为什么 STL 中的容器和算法一定关于区间的操作一定是左 ...

  7. JS实现穿墙效果(判断鼠标划入划出的方向)

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  8. 2013腾讯编程马拉松初赛第〇场(HDU 4503) 湫湫系列故事——植树节

    http://acm.hdu.edu.cn/showproblem.php?pid=4503 题目: 已知湫湫的班里共有n个孩子,每个孩子有Bi个朋友(i从1到n),且朋友关系是相互的,如果a小朋友和 ...

  9. 关于PyYAML报错问题解决

    转自:http://www.fwqtg.net/%E5%85%B3%E4%BA%8Epyyaml%E6%8A%A5%E9%94%99%E9%97%AE%E9%A2%98%E8%A7%A3%E5%86% ...

  10. Webpack学习手册

    多端阅读<Webpack官方文档>: 在PC/MAC上查看:下载w3cschool客户端,进入客户端后通过搜索当前教程手册的名称并下载,就可以查看当前离线教程文档.下载Webpack官方文 ...