Hello!!

We can handle the touch event in the javaScript using touch event listeners.  The touch events are similar to the mouse event but in different way, it is more complex than the mouse event because it supports simultaneous touches at the different portion of the surface. In this, the user can touch the screen with the multiple fingers at the same time, multiple touches makes it more complex then the mouse event. 

Touch Event Handling in JavaScript:-

Touch Event listeners:- We handles the touch event by adding the touch event listeners in the html.

var theElement = document.getElementById("theElement");

theElement.addEventListener("touchend", handlerFunction, false);

function handlerFunction(event) {
}

You can listen for the following touch events:

• touchstart:- Fires when the user put one or more finger on the screen.
• touchmove:- Fires when the user moves the touch point across the touch surface.
• touchend:- Fires when the user stop touching the screen or when the user touch outside the touching surface.
• touchenter:- Fires when the touch point enter the bound-to element. It does not bubble.
• touchleave:- Fires when it leave the bound-to element. It does not bubble.
• touchcancel:- Fires when the touch point no longer register on the touch surface. 

Example:- 

<script>
 
window.addEventListener('load', function(){
 
    var box2 = document.getElementById('box2'),
    boxleft, // left position of moving box
    startx, // starting x coordinate of touch point
    dist = 0, // distance traveled by touch point
    touchobj = null // Touch object holder
 
    box2.addEventListener('touchstart', function(e){
        touchobj = e.changedTouches[0] // reference first touch point
        boxleft = parseInt(box2.style.left) // get left position of box
        startx = parseInt(touchobj.clientX) // get x coord of touch point
        e.preventDefault() // prevent default click behavior
    }, false)
 
    box2.addEventListener('touchmove', function(e){
        touchobj = e.changedTouches[0] // reference first touch point for this event
        var dist = parseInt(touchobj.clientX) - startx // calculate dist traveled by touch point
        // move box according to starting pos plus dist
        // with lower limit 0 and upper limit 380 so it doesn't move outside track:
        box2.style.left = ( (boxleft + dist > 380)? 380 : (boxleft + dist < 0)? 0 : boxleft + dist ) + 'px'
        e.preventDefault()
    }, false)
 
}, false)
 
</script>
 
<div id="track" class="track">
<div id="box2" style="left:0; top:0">Drag Me</div>
</div>

Handling Taps:- A Taps event triggers when we quickly and completely touch on a single object. It is not equivalent to the click event. Mobile browser converted it into the mouse click after the 300ms so that web apps works. When we use both the touch ans click events, here is a slight problem. If a touch event is fires immediately after the tap event, an addition click event is still fire after the 300ms  that means listener function get called twice. To avoid that effect we handle it by using javascript classes.

var theElement = document.getElementById("theElement");

theElement.addEventListener("mouseup", tapOrClick, false);
theElement.addEventListener("touchend", tapOrClick, false);

function tapOrClick(event) {
   //handle tap or click.

    event.preventDefault();
    return false;
}