H5 touch event and H5touch event

H5 touch event and H5touch event
Recently I just got a scroll bar on the Mobile End, more or less feeling!

Touch has three events: touchstart, touchmove, and touchend;

 

Touchstart:Triggered when the touch starts

 

Touchmove:Triggered when the finger slides on the screen

 

Touchend:Triggered when the touch ends

In addition, each touch event includes three touch lists, each containing a series of corresponding touch points (used for multi-touch ):

Touches: the list of all fingers currently on the screen;

TargetTouches: Finger list on the current DOM element;

ChangedTouches:List of finger involved in the current event.

Each touch point contains the following Touch Information (commonly used ):

Dentifier: a numeric value that uniquely identifies the current finger in a touch session. Generally, it is the serial number starting from 0 (android4.1, uc)

Target: DOM element, which is the target of an action.

pageX/pageX/clientX/clientY/screenX/screenY: A numerical value. The position where the action occurs on the screen (the page contains the scroll distance, the client does not include the scroll distance, and the screen is based on the screen ).

The following is my application to touch events in several ways:

Method 1:

 

 1 function load() { 2         document.addEventListener('touchstart', touch, false); 3         document.addEventListener('touchmove', touch, false); 4         document.addEventListener('touchend', touch, false); 5  6         function touch(event) { 7             var event = event || window.event; 8  9             var oParent = document.getElementById("prog");10             var oDiv = document.getElementById("div");11             var oDiv1 = document.getElementById("div1")12             var touch = event.targetTouches[0];13 14             switch (event.type) {15                 case "touchstart":16 17                     break;18                 case "touchend":19 20                     break;21                 case "touchmove":22                     event.preventDefault();23                     var l = touch.clientX-oParent.offsetLeft ;24                     console.log(l)25                     if (l <= 0) {26                         l = 0;27                     } else if (l >= oParent.offsetWidth-oDiv.offsetWidth) {28                         l = oParent.offsetWidth - oDiv.offsetWidth;29                     }30                     var oWidth = (l / oParent.offsetWidth) * 800;31                     oDiv.style.left = l + "px"32                     oDiv1.style.width = oWidth + 25 + "px";33                     break;34             }35 36         }37     }38     window.addEventListener('load', load, false);

 

Method 2:

 1 window.onload=function(){ 2         var  btn=document.getElementById("div"); 3         var  bg=document.getElementById("div1"); 4         var oP=document.getElementById("prog"); 5         var W=oP.offsetWidth; 6         console.log(W) 7         var ox,ex,endx; 8         btn.addEventListener("touchstart",function(e){ 9             e.preventDefault();10             ox=e.touches[0].clientX;11             startX=btn.offsetLeft+3;12             //console.log(startX);13         },false);14         btn.addEventListener("touchmove",function(e){15             e.preventDefault;16             ex=e.changedTouches[0].clientX;17             endx=ex-ox+startX;18             //console.log(endx)19             if(endx<=0){20                 endx=0;21             }else if(endx>=W-btn.offsetWidth){22                 endx=W-btn.offsetWidth;23             }24             var oWidth=(endx/W)*W;25             console.log(oWidth)26             btn.style.left=endx+"px";27             bg.style.width=oWidth+45+"px";28 29         },false)30         btn.addEventListener("touchend",function(){31             btn.removeEventListener("touchmove");32             btn.removeEventListener("tocched");33         },false)34     }

The above is some understanding of touch.