Home > Article > Web Front-end > Xiaoqiang’s HTML5 mobile development road (52) - touch interaction in jquerymobile
When using mobile devices for touch operations, the most commonly used ones are tapping, pressing and holding the screen, or gesture operations. jQuery Mobile can respond to the user's specific touch behavior through bound touch events.
1. Tap and hold
to enter the code directly (everything is in the code, take a closer look!)
<!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> <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: tap event
taphold: hold event
2. Swipe
Swipe refers to writing with your finger or hand When the pen slides quickly left or right on the screen, the swipeleft event or swiperight event will be triggered.
<!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> <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>
A trick is used in the above code. If you need to change the switching effect during the interface switching process, you must use a hyperlink to implement it. Set the display attribute of the link If it is none, call the click() method in the listening function to perform interface switching, and then add data-transition to the link to set the switching effect.
3. Virtual mouse event
Meaning | |
Touch or slide over the DOM container | |
Touch Or slide away | |
touch or press | |
Touch off or mouse button Release | |
The touch ends or the mouse button is released | |
The vclick event is usually in vmouseup Triggered 300ms after the event | |
Triggered when the mousecancel event is initiated in the touch event | |
...... | |
...... |