Touch Mobile Touchscreen Swipe Event

The effect of mobile touch screen sliding is actually the picture carousel, which is well implemented on the PC's page, binding the click and MouseOver events to complete. But on mobile devices, to achieve this kind of carousel effect, you need to use the core touch event. Handle touch events to track each finger to the screen slide.

Four Touch events

• Touchstart triggers when the finger touches the screen, even if one of the fingers has been placed on the screen.
• Touchmove triggers when a finger slides continuously on the screen, and during this event, calling Preventdefault () prevents scrolling.
• Touchend triggered when the finger moves away from the screen
• Touchcancel triggered when the system stops tracking touch (this event has no definite trigger time)

They are both bubbling and can be canceled.

<script>= function () {    Document.addeventlistener ("touchmove")  false);} function _touch (event) {    alert (1);}

Once each touch event is triggered, an event object is generated and the event object includes the following three touch properties

Touches: Represents an array of touch objects that are currently tracked by touching operations.
Targettouches: An array of touch objects that are specific to the event target.
Changetouches: An array of touch objects that represent what has changed since the last touch.

Each touch in these lists consists of the touch object, which contains the touching information, with the following main attributes:

// the location of the touch point relative to the browser window // the position of the touch point relative to the page // the position of the touch point relative to the screen // the ID of the touch object // the current DOM element

Some gestures

• Gesturestart triggers when one finger presses another finger on the screen and touches the screen
• Gesturechange relies on the former when one of the fingers changes, triggering
• Gestureend triggers when any one finger is left

Attention:

When you swipe the entire screen, your finger affects the browser's behavior, such as scrolling and zooming. So when you invoke the touch event, be careful to suppress zooming and scrolling.

1. Disable zooming

Set with meta meta tags.

<meta name= "viewport" content= "Width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0 ">

2. Disable scrolling

Preventdefault is blocking the default behavior, and the default behavior of the touch event is scrolling.  event. Preventdefault ();

For example:

Document.body.addEventListener ('touchmove', function (event   Eventfalse

Complete Example:

<! DOCTYPE html> "Utf-8"> <meta name="Viewport"Content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"><title>touch</title> <script>function Load () {Document.addeventlistener ('Touchstart', Touch,false); Document.addeventlistener ('Touchmove', Touch,false); Document.addeventlistener ('Touchend', Touch,false); function Touch (Event){        var Event=Event|| Window.Event; varOINP = document.getElementById ("INP"); Switch(Event. Type) {             Case "Touchstart": oinp.innerhtml="Touch started ("+Event. touches[0].clientx +","+Event. touches[0].clienty +")";  Break;  Case "Touchend": oinp.innerhtml="<br>touch End ("+Event. changedtouches[0].clientx +","+Event. changedtouches[0].clienty +")";  Break;  Case "Touchmove":                Event. Preventdefault (); Oinp.innerhtml="<br>touch Moved ("+Event. touches[0].clientx +","+Event. touches[0].clienty +")";  Break; }}}window.addeventlistener ('Load', load,false);</script> "INP">div</div></body> 
Touch Mobile Touchscreen Swipe Event