JS Event Monitor mobile phone screen Touch Event touch

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>
 JS Event Monitor phone screen touch Event touch