Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Touch events in javascript

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 227
    Comment on it

    There are following Touch events in javascript:-

    • touchmove - this event triggers when the touch point is moved by the user across the touch surface.
    • touchstart - this event gets triggered when the user makes contact with the touch surface and creates a touch point inside the element the event is bound to.
    • touchend - this event gets triggered when the user removes the touch point from the surface. It gets fired regardless of whether the touch point is inside the element the event is bound to or outside.
    • touchcancel - this event gets triggered when the touch gesture is cancelled,like the user moves his fingers out of the screen.
    • touchenter - this event gets triggered when the touch point enters the bound-to element. This event does not bubble.
    • touch leave - this event gets triggered when the touch point leaves the bound-to element. This event does not bubble.

    Below is an example to show the usage of some events described above :-

    <div class=Touchbox id="box1">
    <h3> test </h3>
    </div>
     
    <h3 id=TouchStatus>Status</h3>
    <script>
     
    window.addEventListener('load', function(){
     
        var testtouch = document.getElementById('box1')
        var statusdiv = document.getElementById('TouchStatus')
        var startx = 0
        var dist = 0
     
        box1.addEventListener('touchstart', function(e){
            var touchobj = e.changedTouches[0] // reference first touch point (ie: first finger)
            startx = parseInt(touchobj.clientX) // get x position of touch point relative to left edge of browser
            statusdiv.innerHTML = 'Status: touchstart<br> ClientX: ' + startx + 'px'
            e.preventDefault()
        }, false)
     
        box1.addEventListener('touchmove', function(e){
            var touchobj = e.changedTouches[0] // reference first touch point for this event
            var dist = parseInt(touchobj.clientX) - startx
            statusdiv.innerHTML = 'Status: touchmove<br> Horizontal distance traveled: ' + dist + 'px'
            e.preventDefault()
        }, false)
     
        box1.addEventListener('touchend', function(e){
            var touchobj = e.changedTouches[0] // reference first touch point for this event
            statusdiv.innerHTML = 'Status: touchend<br> Resting x coordinate: ' + touchobj.clientX + 'px'
            e.preventDefault()
        }, false)
     
    }, false)
     
    </script>
    

    The above code shows the usage of three touch events. You can refer to the following link for more information:

    http://tutorials.jenkov.com/responsive-mobile-friendly-web-design/touch-events-in-javascript.html

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: