js implements touch mobile touch screen sliding events

  • 2020-05-30 19:24:07
  • OfStack

The effect of mobile touch screen sliding is actually image rotation, which can be easily realized on the PC page, and can be completed by binding click, mouseover and other events. On mobile devices, however, the core touch event is needed to achieve this roving effect. Handling the touch event can track every finger that slides on the screen.

Here are four types of touch events
touchstart: // triggered when finger is placed on screen
touchmove: // finger swipes across the screen to trigger
touchend: // triggered when finger leaves screen
touchcancel: // triggered when the system cancels the touch event, which seems to be less frequently used

After each touch event is triggered, one event object is generated, and the event object includes the following three touch lists

touches: // a list of all fingers currently on the screen
targetTouches: // the current list of fingers on the dom element, try to use this instead of touches
changedTouches: // a list of fingers involved in the current event, try to use this instead of touches
Each touch in these lists is made up of touch objects, and touch objects contain touch information. The main properties are as follows:
clientX/clientY: // the position of the touch point relative to the browser window
pageX/pageY: // the position of the touch point relative to the page
screenX/screenY: // the position of the touch point relative to the screen
identifier: // ID for touch objects
target: // current DOM element


When your finger swipes across the screen, it can affect the browser's behavior, such as scrolling and zooming. So be careful not to zoom and scroll when calling the touch event.

1. Do not zoom
Set it using the meta meta tag.

2. No scrolling
preventDefault is the default behavior to block the touch event, and the default behavior for the touch event is scrolling.

Use cases:

<!DOCTYPE html>
<meta http-equiv="Content-Type" Content="text/html; charset=utf-8;">
<title> Mobile touch swipe </title>
<meta name="author" content="rainna" />
<meta name="keywords" content="rainna's js lib" />
<meta name="description" content=" Mobile touch swipe " />
<meta name="viewport" content="target-densitydpi=320,width=640,user-scalable=no">
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;}
<div class="m-slider">
<ul class="cnt" id="slider">
<img src="http://imglf1.ph.126.net/qKodH3sZoVbPalKFtHS9mw==/6608946691259322175.jpg">
<p>20140813 The mirror world, after all, is just a reflection. Can see your shadow, but can not touch your future </p>
<img src="http://imglf1.ph.126.net/40-jqH_j6EoCWnZOixY2pA==/4798022453110310215.jpg">
<p>20140812 Xilinhot to east Ukraine flag S101 Where you have to go, 1 It's a beautiful railway. Under the railway was a small salt marsh, faint 1 The feeling of silk sky. Too bad I played here 1 Not for hours 1 The train passed by and had to continue to dongwu banner. </p>
<img src="http://imglf0.ph.126.net/Jnmi2y51zVdjKAYlibtpFw==/3068640196117481166.jpg">
<p>20140811 Why is the color of the water so blue, I also wonder, anyway, the natural saturation and contrast pull out is this color </p>
<img src="http://imglf1.ph.126.net/79GPsjhwiIj8e-0nP5MsEQ==/6619295294699949331.jpg">
<p> Ocean planet 3 It's so hot in chongqing that I want to throw myself on the train </p>
<img src="http://imglf1.ph.126.net/40-jqH_j6EoCWnZOixY2pA==/4798022453110310215.jpg">
<p> The above works are from two designers as viewers, can you distinguish the design style </p>
<div class="icons" id="icons">
<span class="curr">1</span>
var slider = {
// Determine if the device supports touch The event 
touch:('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch,
// The event 
index:0, // Displays the index of the element 
slider:this.slider, //this for slider object 
var self = this; //this Refers to the events object 
if(event.type == 'touchstart'){
}else if(event.type == 'touchmove'){
}else if(event.type == 'touchend'){
// The slide began 
var touch = event.targetTouches[0]; //touches The array object gets all of the values on the screen touch , take the first 1 a touch
startPos = {x:touch.pageX,y:touch.pageY,time:+new Date}; // Take the first 1 a touch The coordinate values of 
isScrolling = 0; // This parameter determines whether to scroll vertically or horizontally 
// mobile 
// When there are multiple screens touch Or if the page has been scaled, it will not be executed move operation 
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 for 1 , represents longitudinal sliding, 0 Is horizontal sliding 
if(isScrolling === 0){
event.preventDefault(); // The default action to block the touch event is to prevent scrolling 
this.slider.className = 'cnt';
this.slider.style.left = -this.index*600 + endPos.x + 'px';
// The slide release 
var duration = +new Date - startPos.time; // The duration of the slide 
if(isScrolling === 0){ // When scrolling horizontally 
this.icon[this.index].className = '';
if(Number(duration) > 10){
// Determine whether to move left or right when the offset is greater than 10 When performing 
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';
// Unbundling event 
// Initialize the 
var self = this; //this Refers to the slider object 
if(!!self.touch) self.slider.addEventListener('touchstart',self.events,false); //addEventListener The first 2 Three parameters can be passed 1 It will call this object handleEvent attribute 

That's all for this article, I hope you enjoy it.

Related articles: