Xiaoqiang's HTML5 mobile development path (52) -- touch interaction in jquerymobile

When using a Mobile device for touch operations, the most common is to tap, hold down the screen or gesture operations, jQuery Mobile can respond to a user's specific touch behavior through bound touch events.

1. Click and hold

Directly add the code (everything is in the code, so be careful !)

Exercise
 
 
 <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 event triggered') ;}); $ ('# page2 '). live ('taphold ', function () {$. mobile. changePage ('# about') ;}); </script>
 
  
   
Tap event processing
  Click the page to go to the next page.
  
Press and hold to open the dialog box
  
 
 
  
   
Tap event processing
  Click the page to return to the previous page.
  
 This program demonstrates how to respond to a touch-light event.

Tap: Click an event

Taphold: Press and hold the event

Ii. Scanning

You can use your fingers or pen to quickly slide to the left or right of the screen to trigger a swipeleft event or a swiperight event.

Exercise
 
 
 <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 () {$ (' # lnkdift '). click () ;}); $ ('# page2 '). live ('swiperleft', function () {$. mobile. changePage ('# about') ;}); </script>
 
  
   
Swipe event processing
  Slide the page to the right to go to the next page
  
Move the page to the left to open the dialog box
  
 
 
  
   
Swipe event processing
  Slide the page to the right to enter the previous page br/> move to the left to open the dialog box
  
 This program demonstrates swipeleft & swiperight touch Event Response

The above Code uses a technique. If you need to change the switching effect during the interface switching process, you must use the hyperlink implementation to set the display attribute of the link to none, call the click () method in the listener function to perform interface switching, and then add data-transition to the link to set the switching effect.

3. Virtual mouse events

Event	Description
Vmouseover	Touch or slide over the DOM container
Vmoseout	Touch or slide away
Vmousedown	Touch or press
Vmoseup	Touch to end or press the mouse button to release
Vclick	The touch ends or the mouse button is released.
	A vclick event is usually triggered ms after a vmouseup event.
Vmousecancel	Triggered when the mousecancel event is triggered in a touch event.
......	......
......	......

Exercise
 
 
 <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 ("Current click position" + "\ n" + "\ npageX:" + event. pageX + // the abscissa of the current HTML page "\ npageY:" + event. pageY + // The ordinate of the current HTML page "\ nscreenX:" + event. screenX + // the abscissa of the current screen "\ nscreenY:" + event. screenY + // The Y coordinate of the current screen "\ nclientX:" + event. clientX + // the abscissa of the current window area "\ nclientY:" + event. clientY); // The ordinate of the current window area}); </script>
 
  
   
VMouse event processing
  Click the page to display the content at the bottom of the click position