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

You can use .on() to capture multiple events and then test for touch screen, e.g.:

$('#selector')
.on('touchstart mousedown', function(e){
  e.preventDefault();
  var touch = e.touches[0];
  if(touch){
    // Do some stuff
  }
  else {
    // Do some other stuff
  }
});

Answer 2

I know I am a little late on this but just tested benmajor's GitHub jQuery Touch Events plugin for both 1.4 and 1.7+ versions of JQuery. It is lightweight and works perfectly with both on and bind while providing support for an exhaustive set of touch events.

Answer 3

If you're using jQuery 1.7+ it's even simpler than all these other answers.

$('#whatever').on({ 'touchstart' : function(){ /* do something... */ } });

Answer 4

The simplest approach is to use a multitouch JavaScript library like Hammer.js. Then you can write code like:

canvas
    .hammer({prevent_default: true})
    .bind('doubletap', function(e) { // And double click
        // Zoom-in
    })
    .bind('dragstart', function(e) { // And mousedown
        // Get ready to drag
    })
    .bind('drag', function(e) { // And mousemove when mousedown
        // Pan the image
    })
    .bind('dragend', function(e) { // And mouseup
        // Finish the drag
    });

And you can keep going. It supports tap, double tap, swipe, hold, transform (i.e., pinch) and drag. The touch events also fire when equivalent mouse actions happen, so you don't need to write two sets of event handlers. Oh, and you need the jQuery plugin if you want to be able to write in the jQueryish way as I did.

Answer 5

Using touchstart or touchend alone is not a good solution, because if you scroll the page, the device detect it as touch or tap too. So, the best way to detect a tap and click event at the same time is to just detect the touch events which are not moving the screen(scrolling). So to do this just add this code to your application:

$(document).on('touchstart', function() {
    detectTap = true; //detects all touch events
});
$(document).on('touchmove', function() {
    detectTap = false; //Excludes the scroll events from touch events
});
$(document).on('click touchend', function(event) {
    if (event.type == "click") detectTap = true; //detects click events 
       if (detectTap){
          //here you can write the function or codes you wanna execute on tap

       }
 });

I tested it and it works fine for me on iPad and iPhone. It detects tap and can distinguish tap and touch scroll easily.

Answer 6

Core jQuery doesn't have anything special for touch events, but you can easily build your own using the following events

• touchstart
• touchmove
• touchend
• touchcancel

For example, the touchmove

document.addEventListener('touchmove', function(e) {
    e.preventDefault();
    var touch = e.touches[0];
    alert(touch.pageX + " - " + touch.pageY);
}, false);

This works in most webkit based browsers (incl. android).

Here is some good documenation: