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)