当使用移动设备的触摸操作，最常用的是点击、按住屏幕或手势，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>

版权声明：本文博主原创文章，博客，未经同意不得转载。

小强HTML5手机发展之路（52）——jquerymobile触摸互动的更多相关文章

  1. 萧墙HTML5手机发展之路（51）——jquerymobile在提高页面访问速度

    正在使用jQuery Mobile开发时间可以选择单页模板和多页模板,在单页模板时从一个页面跳转到另一个页面时从需要server要求.用户会感到轻微的停顿. 使用多页模板,为了改善网页之间跳跃的流畅, ...

  2. 萧墙HTML5手机发展之路（53）——jQueryMobile页面之间的参数传递

    基于单个页面模板HTTP通过路POST和GET请求传递参数.在多页模板,并且不需要server沟通,通常有三种方式在多页模板来实现页面之间的参数传递. 1.GET道路:上一页页生成参数并传递到下一个页 ...

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

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

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

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

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

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

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

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

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

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

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

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

  9. IS创新之路 -- 都昌公司赋能型HIT企业发展之路

    ◆◆前言 近日,上海瑞金医院对我司表示:“我院从2000年开始自主开发医院信息系统,走出了一条可持续的信息化发展之路.已建成五大系统,284个子系统.但我院仍然坚持在努力推进以电子病历为核心医院信息化 ...

随机推荐

  1. Nginx + Lua + redis （一）(转)

    使用 Lua 脚本语言操作 Redis. 由于大量的 Lua 代码写在 Nginx 中,会使配置文件显得很繁琐,所以这里使用 content_by_lua_file 来引入 Lua 脚本文件. 要使用 ...

  2. 开源通讯组件ec

    跨平台开源通讯组件elastic communication elastic communication是基于c#开发支持.net和mono的通讯组件(简称EC),EC的主要目的简化mono和.net ...

  3. cassandra 服务启动流程

    cassandra 服务启动流程 1.  setup 1)   CassandraDaemon ->main publicstaticvoidmain(String[]args) { insta ...

  4. Bug记录：微博的Java SDK返回经纬度错误

    现象:美国的坐标点可能会定位到西藏地区-后发现原来负经度经解析后,均变成正的! 源码: private void getGeoInfo(String geo) { StringBuffer value ...

  5. Chapter 1 Securing Your Server and Network(4):使用虚拟服务帐号

    原文:Chapter 1 Securing Your Server and Network(4):使用虚拟服务帐号 原文出处:http://blog.csdn.net/dba_huangzj/arti ...

  6. uva 10831 - Gerg&#39;s Cake(勒让德符号)

    题目链接:uva 10831 - Gerg's Cake 题目大意:给定a和p.p为素数,问说是否存在x,使得x2≡a%p 解题思路:勒让德记号,推断ap−12≡1%p #include <cs ...

  7. Paypal-Express Checkout快捷支付方式的android端开发心得（二）

    一.前导 上一篇讲的不是非常好,这里再又一次讲一下. Paypal手机支付有2种形式: 1.Mobile Express Checkout,MEC,快捷支付 2.MPL 假设採用MEC支付方式,这样的 ...

  8. Android使用开发WebView战斗技能

    转载请注明出处:http://blog.csdn.net/allen315410/article/details/44619181 前段时间做项目的时候.在项目中用了WebView组件,遇到了一些问题 ...

  9. hdu 3572 Task Schedule （dinic算法）

    pid=3572">Task Schedule Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 ...

  10. DM8168 新三板系统启动

    DM8168从补丁到系统的新董事会开始折腾了20天,最终完成,高校是累的东西,导师只焊接机10一个BGA,其他人则手. 前段时间启动操作系统时,到了Starting Matrix GUI applic ...