小强HTML5手机发展之路（52）——jquerymobile触摸互动
当使用移动设备的触摸操作，最常用的是点击、按住屏幕或手势，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触摸互动的更多相关文章
- 萧墙HTML5手机发展之路（51）——jquerymobile在提高页面访问速度
正在使用jQuery Mobile开发时间可以选择单页模板和多页模板,在单页模板时从一个页面跳转到另一个页面时从需要server要求.用户会感到轻微的停顿. 使用多页模板,为了改善网页之间跳跃的流畅, ...
- 萧墙HTML5手机发展之路（53）——jQueryMobile页面之间的参数传递
基于单个页面模板HTTP通过路POST和GET请求传递参数.在多页模板,并且不需要server沟通,通常有三种方式在多页模板来实现页面之间的参数传递. 1.GET道路:上一页页生成参数并传递到下一个页 ...
- 小强的HTML5移动开发之路（11）——链接，图片，表格，框架
来自:http://blog.csdn.net/dawanganban/article/details/18098193 一.HTML是什么? HTML(hypertext mark-uplangua ...
- 小强的HTML5移动开发之路（18）——HTML5地理定位
来自:http://blog.csdn.net/dawanganban/article/details/18192091 在前面的<小强的HTML5移动开发之路(2)--HTML5的新特性> ...
- 小强的HTML5移动开发之路（14）——Video标签详解
来自:http://blog.csdn.net/dawanganban/article/details/18180605 在前面的小强的HTML5移动开发之路(5)--制作一个漂亮的视频播放器中制作了 ...
- 小强的HTML5移动开发之路（13）——HTML5中的全局属性
来自:http://blog.csdn.net/dawanganban/article/details/18179483 一.accssskey 快捷键 <!DOCTYPE HTML> ...
- 小强的HTML5移动开发之路（42）——HTML4与HTML5文档结构比较
一般来说,人们在书写包括HTML在内的文档时,习惯上按照类似于"章--节--小节"这样的层次结构来进行. 在HTML4中的描述方式: <html> <head&g ...
- 小强的HTML5移动开发之路（37）——jqMobi快速入门
在<小强的HTML5移动开发之路(33)-- jqMobi基础>中我们了解了什么是jqMobi,并从官方下载了jqMobi开发包,下载后解压目录如下: 拷贝上面的/css目录./plugi ...
- IS创新之路 -- 都昌公司赋能型HIT企业发展之路
◆◆前言 近日,上海瑞金医院对我司表示:“我院从2000年开始自主开发医院信息系统,走出了一条可持续的信息化发展之路.已建成五大系统,284个子系统.但我院仍然坚持在努力推进以电子病历为核心医院信息化 ...
随机推荐
- [LeetCode92]Reverse Linked List II
题目: Reverse a linked list from position m to n. Do it in-place and in one-pass. For example:Given 1- ...
- 白学jquery Mobile《构建跨平台APP：jQuery Mobile移动应用实战》连续7-电话问卷调查
[例7-3 文本编辑框创建一个简单的调查问卷] 01 <!DOCTYPEhtml> 02 <html> 03 <head> 04 ...
- 第三篇——第二部分——第三文 配置SQL Server镜像——域环境
原文:第三篇--第二部分--第三文 配置SQL Server镜像--域环境 原文出处:http://blog.csdn.net/dba_huangzj/article/details/28904503 ...
- 复制（1）——SQLServer 复制简介
原文:复制(1)--SQLServer 复制简介 前言: SQLServer的复制技术最少从SQLServer2000时代已经出现,当初是为了分布式计算,不是为了高可用.但是到了今天,复制也成为了一种 ...
- 世界杯推动彩票APP爆发，谁将会笑到最后？
巴西世界杯的火爆上演不只给球迷们带来了一场华丽的足球盛宴,对网络彩票行业而言,这也是一次千载难逢的商机. 只是,并不是全部玩家都能攫取理想的商业利益,网络彩票的角逐宛如世界杯的比赛一样,有人晋 ...
- Lichee(三) Android4.0该产品的目标文件夹，Lichee链接---extract-bsp
由<Lichee() 在sun4i_crane平台下的编译>介绍了编译lichee的基本情况,我们终于得到了编译后的结果例如以下: out/ ├── android │ ├── bIm ...
- hibernate在地图的方法之一协会
[Hibernate]之关于多对一单向关联映射 在项目的开发中多对一的单向关联映射是最常见的关联映射! 这个着重具体解说一下! 比如,我们如今一个组(Group)和人(Person) id name ...
- 【Linux&Unix--文件描述叙事的性格和权柄】
个人学习整理,如有不足之处,请不吝不吝赐教.转载请注明:@CSU-Max 系列博文: Linux&Unix学习第一弹 -- 文件描写叙述符与权限 L ...
- Mac周边环境 goBASIC语言HelloWorld
1. 安装mercurial Mercurial 是一种轻量级分布式版本号控制系统,採用 Python 语言实现 能够输入hg命令查询系统是否安装mercurial,能够例如以下两种命令安装 $sud ...
- Spring AOP入门——概念和注意事项
AOP什么? AOP在功能方面,它是之前和之后运行一些业务逻辑,一些操作(比方记录日志.或者是推断是否有权限等),这些操作的加入.全然不耦合于原来的业务逻辑.从而对原有业务逻辑全然是透明. 也就是说. ...