小强的HTML5移动开发之路（52）——jquerymobile中的触控交互

百变鹏仔 2个月前 (10-19) #H5教程

文章标签之路

当使用移动设备进行触控操作时，最常用的就是轻击、按住屏幕或者手势操作，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">$(&#39;#page1&#39;).live(&#39;tap&#39;, function(){	$.mobile.changePage(&#39;#page2&#39;);});$(&#39;#page2&#39;).live(&#39;tap&#39;, function(){	$.mobile.changePage(&#39;#page1&#39;);});$(&#39;#page1&#39;).live(&#39;taphold&#39;, function(){	alert(&#39;taphold事件被触发&#39;);});$(&#39;#page2&#39;).live(&#39;taphold&#39;, function(){	$.mobile.changePage(&#39;#about&#39;);});</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：轻击事件

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">$(&#39;#page1&#39;).live(&#39;swiperight&#39;, function(){	$.mobile.changePage(&#39;#page2&#39;);});$(&#39;#page2&#39;).live(&#39;swiperight&#39;, function(){	$.mobile.changePage(&#39;#page1&#39;);});$(&#39;#page1&#39;).live(&#39;swipeleft&#39;, function(){	$(&#39;#lnkDialog&#39;).click();});$(&#39;#page2&#39;).live(&#39;swiperleft&#39;, function(){	$.mobile.changePage(&#39;#about&#39;);});</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进行切换效果设置。

三、虚拟鼠标事件

事件	含义
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">$(&#39;#page1&#39;).live(&#39;vmouseup&#39;, 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中的触控交互

HTML在线编辑器的调用方法和使用方法

AlloyTouch全屏滚动插件 30秒搞定顺滑H5页

HTML5 js实现拖拉上传文件功能

Canvas and Drawables 翻译第一集

Canvas and Drawables 翻译第三集