jquery touch events

you can easily build your own touch events using the following events
  • touchstart
  • touchmove
  • touchend
  • touchcancel
Using jQuery
For example, the touchstart
$(document).on({ 'touchstart' : function() { 
 /* do something... */ 
    } 
});
Using Javascript
For example, the touchmove
document.addEventListener('touchmove', function(e) {
    e.preventDefault();
    var touch = e.touches[0];
    alert(touch.pageX + " - " + touch.pageY);
}, false);

<div>X: <span id="xtext">0</span> 
</div>
<div>Y: <span id="ytext">0</span>
</div>
<div>Event:
    <div id="eventName"></div>
</div>
function doTouch(name, e) {
    e.preventDefault();
    var touch = e.touches[0];
    if (name != 'touchend') {
        document.getElementById("xtext").innerHTML = touch.pageX;
        document.getElementById("ytext").innerHTML = touch.pageY;
    }
    document.getElementById("eventName").innerHTML = name + '
' + document.getElementById("eventName").innerHTML;
}

document.addEventListener('touchstart', function (e) {
    doTouch('touchstart', e);
}, false);
document.addEventListener('touchmove', function (e) {
    doTouch('touchmove', e);
}, false);
document.addEventListener('touchend', function (e) {
    doTouch('touchend', e);
}, false);

jQuery Mobile offers several custom events that build upon native events to create useful hooks for development.
Which is also work on IOS devices as well.
Touch events
  • tap
  • taphold
  • swipe
  • swipeleft
  • swiperight

Virtual mouse events
  • vmouseover
  • vmouseout
  • vmousedown
  • vmousemove
  • vmouseup
  • vclick
  • vmousecancel
Handling Orientation Events jQuery
jquery touch events jquery touch events Reviewed by Bhaumik Patel on 7:50 PM Rating: 5