JS Mobile Client-touch screen 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.

Here are four kinds of touch events

Touchstart: Triggers when the finger is placed on the screen

Touchmove://finger on-screen swipe trigger

Touchend://trigger when finger leaves screen

Touchcancel://The system cancels the touch event when triggered, this seems to be less use

Once each touch event is triggered, an event object is generated and the event object includes the following three touch lists in addition

Touches://List of all fingers on the current screen

Targettouches://The list of fingers on the current DOM element, try to use this instead of touches

Changedtouches://List of fingers that involve the current event, try to use this instead of touches

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

Clientx/clienty://Touch point relative to the location of the browser window

Pagex/pagey://Touch point relative to the position of the page

Screenx/screeny://Touch point relative to the position of the screen

Identifier: ID of the//touch object

Target://Current DOM element

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= "Target-densitydpi=320,width=640,user-scalable=no" >

2. Disable scrolling

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

Event.preventdefault ();

Case:

Here's a case where you need to see the effect on your mobile device.

1. Define the event handler function for Touchstart and bind the event:

if (!! Self.touch) Self.slider.addEventListener (' Touchstart ', self.events,false);

Defining event handlers for Touchstart
Start:function (event) {
var touch = event.targettouches[0]; Touches array objects get all the touch on the screen, take the first touch
startpos = {x:touch.pagex,y:touch.pagey,time:+new Date}; Take the coordinate value of the first touch
isscrolling = 0; This parameter determines whether to scroll vertically or horizontally
This.slider.addEventListener (' Touchmove ', this,false);
This.slider.addEventListener (' Touchend ', this,false);
},

When the Touchstart event is triggered, an event object is generated, including a touch list, a first touch on the screen, and a note of the coordinates of its pagex,pagey. Defines the direction in which a variable marker scrolls. The Touchmove,touchend event is bound at this time.

2. Define the event that the finger moves on the screen, define the Touchmove function.

Move
Move:function (event) {
Do not perform a move operation when the screen has multiple touch or the page is being retracted
if (Event.targetTouches.length > 1 | | event.scale && event.scale!== 1) return;
var touch = event.targettouches[0];
Endpos = {X:TOUCH.PAGEX-STARTPOS.X,Y:TOUCH.PAGEY-STARTPOS.Y};
isscrolling = Math.Abs (endpos.x) < Math.Abs (ENDPOS.Y)? 1:0; Isscrolling is 1 o'clock, indicates longitudinal slide, 0 is transverse slide
if (isscrolling = = = 0) {
Event.preventdefault (); Prevent the default behavior of touch events, which is to prevent scrolling
This.slider.className = ' cnt ';
This.slider.style.left =-this.index*600 + endpos.x + ' px ';
}
},

Also first block the page scrolling behavior, Touchmove trigger, will generate an event object, in the event object to get the touches touch list, get the first touch, and write down the coordinates of Pagex,pagey, calculate the travel value, draw the finger sliding offset, Causes the current DOM element to slide.

3. Define the Touchend function for the event that the finger picks up from the screen.

Slide release
End:function (event) {
var duration = +new Date-startpos.time; Duration of slide
if (isscrolling = = = 0) {//when scrolling horizontally
This.icon[this.index].classname = ";
if (number (duration) > 10) {
Determines whether to move left or right, when the offset is greater than 10 o'clock
if (Endpos.x > 10) {
if (this.index!== 0) This.index-= 1;
}else if (Endpos.x <-10) {
if (This.index!== this.icon.length-1) This.index + = 1;
}
}
This.icon[this.index].classname = ' Curr ';
This.slider.className = ' cnt F-anim ';
This.slider.style.left =-this.index*600 + ' px ';
}
Unbind Event
This.slider.removeEventListener (' Touchmove ', this,false);
This.slider.removeEventListener (' Touchend ', this,false);
},

The function that the finger executes after it leaves the screen. This is the first time the finger stays on the screen, and if the time is too short, the function is not executed. Then judge whether the fingers are left or right, and perform different actions respectively. Finally, it is important to remove the Touchmove,touchend binding event.

Source:

<!DOCTYPE html><Html><Head><MetaHttp-equiv= "Content-type"Content= "text/html; Charset=utf-8; "><Title> Touch sliding on the mobile side</Title><MetaName= "Author"Content= "Rainna"/><MetaName= "keywords"Content= "Rainna S js Lib"/><MetaName= "description"Content= "Mobile Touch-swipe"/><MetaName= "Viewport"Content= "Target-densitydpi=320,width=640,user-scalable=no"><Style>*{Margin:0;Padding:0;}Li{List-style:None;}. m-slider{Width:600px;Margin:50px 20px;Overflow:Hidden;}. M-slider. CNT{Position:Relative;Left:0;Width:3000px;}. M-slider CNT Li{Float:Left;Width:600px;}. M-slider. CNT img{Display:Block;Width:100%;Height:450px;}. M-slider CNT P{Margin:20px 0;}. M-slider. Icons{Text-align:Center;Color:#000;}. M-slider. Icons Span{Margin:0 5px;}. m-slider. Icons. Curr{Color:Red;}. F-anim{-webkit-transition:left. 2s linear;}</Style></Head><Body><DivClass= "M-slider"><UlClass= "CNT"Id= "Slider"><Li><ImgSrc= "Http://imglf1.ph.126.net/qKodH3sZoVbPalKFtHS9mw==/6608946691259322175.jpg"><P>20140813 Mirror of the world, after all, just reflection. See your shadow, but can't touch your future</p> </li> <li>  <p>20140812 Xilin Hot to Dongwuqi S101, a very beautiful railway. Below the railway is a small salt marsh, with a hint of the feeling of the sky. It was a pity that I had not seen a train pass for one hours and had to go to Dongwuqi. </p> </li> <li>  <p>20140811 water Color Why so blue, I also wonder, anyway the natural saturation and contrast pull is the color of the </p> </li> <li >  <p> Ocean Planet 3 Chongqing Weather hot I want to rails suicide </p> </li> <li>  <p> These works are from two designers as the viewer, can you differentiate by design style </p> </li> </ul> <div class= "Icons" id= "Icons" > <span class= "curr" >1</span> <span>2</span> <span>3</ span> <span>4</span> <span>5</span> </div></div><script>var slider = {Determine if the device supports touch Event touch: (' ontouchstart ' in window) | | Window. Documenttouch && document Instanceof Documenttouch, slider:document.getElementById (' slider '),//Event events:{ index:0,//display element index Slider:this.slider,//this as Slider object icons:document.getElementById (' icons '), Icon: This.icons.getElementsByTagName (' span '), handleevent:function (event) {var = this;//this means the Events object if (Event.type = = ' Touchstart ') {Self.start (event);} else if (Event.type = = ' Touchmove ') {Self.move (event);} else if (Event.type = = ' Touchend ') {Self.end (event)}},//Sliding start start:function (event) {var touch = event.targettouches[0]; The touches array object gets all the touch on the screen, taking the first touch startpos = {x:touch.pagex,y:touch.pagey,time:+new Date}; Take the coordinate value of the first touch isscrolling = 0; This parameter determines whether vertical scrolling or horizontal scrolling this.slider.addEventListener (' Touchmove ', this,false); This.slider.addEventListener (' Touchend ', this,false); },//Mobile Move:function (event) {//When the screen has more than one touch or the page is being indented, do not perform a move action if (Event.targetTouches.length > 1 | | event.scale && event.scale!== 1) return; var touch = event.targettouches[0]; Endpos = {X:TOUCH.PAGEX-STARTPOS.X,Y:TOUCH.PAGEY-STARTPOS.Y}; isscrolling = Math.Abs (endpos.x) < Math.Abs (ENDPOS.Y)? 1:0; Isscrolling is 1 o'clock, which indicates portrait sliding, 0 is horizontal sliding if (isscrolling = = = 0) {event.preventdefault ();//blocking the default behavior of touch events, that is, blocking scrolling This.slider.className = ' cnt '; This.slider.style.left =-this.index*600 + endpos.x + ' px '; }},//Sliding release end:function (Event) {var duration = +new date-startpos.time;//sliding duration if (isscrolling = = 0) {//when scrolling for horizontal this . icon[this.index].classname = "; if (number (duration) > 10) {//Determines whether to move left or right, when the offset is greater than 10 o'clock execute if (Endpos.x >) {if (this.index!== 0) This.index-= 1;} else if (Endpos.x < -10) {if (This.index!== this.icon.length-1) This.index + = 1;}} This.icon[this.index].classname = ' Curr '; This.slider.className = ' cnt F-anim '; This.slider.style.left =-this.index*600 + ' px '; }//Unbind event This.slider.removeEventListener (' Touchmove ', this,false); This.slider.removeEventListener (' Touchend ', this,false); }},//Initialize Init:funCtion () {var = this;//this refers to the slider object if (!! Self.touch) Self.slider.addEventListener (' Touchstart ', self.events,false); AddEventListener The second argument can pass an object, the Handleevent property of the object is called}};slider.init ();</script></body>
Source: http://www.cnblogs.com/zourong/p/3913446.html

JS Mobile Client-touch screen swipe event