Introduction to touch events and virtual mouse events in jquery mobile page development _jquery

Touching event (Touch)
There are some touch events in JQuery Mobile that can be customized. However, these events are only available when a user interacting with a touch-enabled device accesses your jQuery Mobile site. When these events are available, you can trigger any custom Java script as a response to five different events tap, Taphold, Swipe, swipeleft, and Swiperight.

Tap (TAP): Trigger after a quick and complete light hit

Taphold (light hit): Light click does not put (about one second) after triggering

Swipe (sliding): an event that is triggered when the horizontal drag is greater than 30PX in one second, or when an event occurs that is less than 20px vertically. How long to drag and drop how many px can be set. This event has properties associated with it, respectively, for the

Scrollsupressionthreshold (Default: 10px) – The horizontal drag is greater than this value and will not be triggered.
Durationthreshold (Default: 1000ms) – Sliding time beyond this value will not produce a sliding event.
Horizontaldistancethreshold (Default: 30px) – A sliding event is generated if the horizontal stroke distance exceeds this value.
Verticaldistancethreshold (Default: 75px) – The vertical stroke distance is less than this number to produce a sliding event.
Swipeleft (left stroke): Trigger when the stroke event is left direction

Swiperight (right): trigger when the stroke event is in the right direction

To bind these events, you only need to program in Document.ready (), as in the following code example:

 <! DOCTYPE html>  
 

You can see from the above code that a list of lists is bound to the Taphold event, and when the DOM is loaded, when the Taphold event is triggered, a message tapped and held is displayed.

Virtual Mouse Events
we provide a series of "virtual" mouse events that attempt to abstract the mouse and touch events. This allows developers to register their listening for some basic mouse events, such as MouseDown, MouseMove, MouseUp, and click. Plug-ins will be in the touch environment, the plug-in will remain in the context of the traditional mouse trigger sequence, such as: Vmouseup always before Vmousedown is triggered, Vmousedown always before Vmouseup, and so on. The virtual mouse event also standardizes the coordinate information released in the book's Sword. Therefore, the coordinates of the Pagex, Pagey, ScreenX, ScreenY, ClientX, and Clienty of the event objects in a touch-based device can be used.

Vmouseover: A formalized event that deals with touch or mouseover

Vmousedown: A formalized event that deals with Touchstart or MouseDown

Vmousemove: A formalized event that deals with Touchmove or MouseMove

Vmouseup: A formalized event that deals with Touchend or MouseUp

Vclick: Handles touchend or mouse clicks to formalize the event. On a touch-based device, this event is triggered after the Vmouseup event.

Vmousecancel: A formalized event that deals with touch or mouse mousecancel

Caution: Use Vclick carefully
Be careful to use Vclick on the touch device. The WebKit kernel browser will generate MouseDown, MouseUp, and click 3 Events after the Touchend event triggers 300ms. The targets of these generated mouse events are computed at the time they are triggered and are based on the location of the touch event, and in some cases will result in different computations on different devices or even different OS of the same device. This means that the target language of the original click event may not be the same for the mouse event that the browser itself generates.
We recommend that you use the click instead of the Vclick method after touching the event that may change the content below the point you clicked. Such events include page transitions and other behaviors such as shrinking/stretching events that might cause the screen to change or the content to be completely replaced.

Cancel the default click behavior of an element
The application invokes a Vclick event to cancel the default click event for an element. On a mouse based device, calling the Preventdefault () method on the Vclick event is equivalent to invoking the Preventdefault () method for the time bubbling phase of the real click. It's a bit complicated on a touch-based device because a real click event triggers 300 milliseconds after the Vclick event triggers. For touch devices, calling the Preventdefault () method on the Vclick event will try to capture the next click event with some code from the Vmouse plug-in. So according to the above warning, it's more difficult to match a touch event and a mouse event that corresponds to him, because their goals are different. So the Vmouse plug-in attempts to identify a matching click event by coordinates usually fails.
In some cases, the identification of the target and coordinates of two events fails, causing the Click event to be triggered or the default action of the element to be executed, or if the content is changed or replaced, triggering a click of another element. If such a bug occurs regularly on a given element, we recommend that the action use Click to drive the trigger.