How to recognize touch events using jQuery in Safa

Question

Is it possible to recognize touch events on the iPad's Safari browser using jQuery?

I used mouseOver and mouseOut events in a web application. Are there any similar events for the iPad's Safari browser since there are no events like mouseOut, mouseMove?

Answer 1

jQuery Core doesn't have anything special, but you can read on jQuery Mobile Events page about different touch events, which also work on other than iOS devices as well.

They are:

• tap
• taphold
• swipe
• swipeleft
• swiperight

Notice also, that during scroll events (based on touch on mobile devices) iOS devices freezes DOM manipulation while scrolling.

Answer 2

I was a little bit worried about using only touchmove for my project, since it only seems to fire when your touch moves from one location to another (and not on the initial touch). So I combined it with touchstart, and this seems to work very well for the initial touch and any movements.

<script>

function doTouch(e) {
    e.preventDefault();
    var touch = e.touches[0];

    document.getElementById("xtext").innerHTML = touch.pageX;
    document.getElementById("ytext").innerHTML = touch.pageY;   
}

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

</script>

X: <div id="xtext">0</div>
Y: <div id="ytext">0</div>