当使用移动设备进行触控操作时，最常用的就是轻击、按住屏幕或者手势操作，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移动开发之路（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. golang 方法内部定义子方法及调用

    package main import ( "fmt" "reflect" ) func out(ch chan int) { <-ch fmt.Prin ...

  2. JS错误记录 - To-do List

    var data = (localStorage.getItem('todolist'))? JSON.parse(localStorage.getItem('todolist')) : { todo ...

  3. django 简单会议室预约（3）

    URL配置: 今天配置一下URL,打开urls.py配置如下: from django.conf.urls import patterns, include, url from djapp impor ...

  4. CISP/CISA 每日一题 21

    CISSP 每日一题(答)What is the term that identifies data ona disk after the data has supposedly been erase ...

  5. 【Codeforces Round #451 (Div. 2) D】Alarm Clock

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 尺取法+二分. 类似滑动窗口. 即左端点为l,右端点为r. 维护a[r]-a[l]+1总是小于等于m的就好. (大于m就右移左端点) ...

  6. Redis .Net客户端源码

    1.简单介绍 当前NoSql使用已经极为普遍,无论是Java生态圈,还是.net生态圈.大大小小的Web站点在追求高性能高可靠性方面,不由自主都选择了NoSQL技术作为优先考虑的方面.主流的技术有:H ...

  7. Spring MVC框架实例

    Spring  MVC 背景介绍 Spring 框架提供了构建 Web 应用程序的全功能 MVC 模块.使用 Spring 可插入的 MVC 架构,能够选择是使用内置的 Spring Web 框架还是 ...

  8. Android触摸事件(五)-CropBitmapActivity关于裁剪工具的使用

    文件夹 文件夹 概述 传递数据 裁剪流程 其他事项 使用方式 图片辅助功能 图片缩略图载入 图片旋转 源代码 GitHub地址 演示样例GIF 概述 这个Activity是为了裁剪图片的.使用时须要提 ...

  9. TextView-属性大全（设置超链接颜色）

    今天想要修改一个textview下的超链接的颜色值,自己当时在网上搜了一下,结果看到的全是怎么给一个textview中的部分内容设置颜色.下划线等.当时就以为在textview属性里面可能不存在设定超 ...

  10. mysql测试spring事务是否生效

    同时对三张表进行插入操作,事务保证完整性.下面进行简单测试: 1. 锁定表 锁定用户表 LOCK TABLES user WRITE; 查看表是否锁定: show ; 显示被锁定的表. 2. 验证在同 ...