小强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>
版权声明:本文博主原创文章,博客,未经同意不得转载。