How to recognize touch events using jQuery in Safari for iPad? Is it possible?

Question

Is it possible to recognize touch events in the iPad Safari browser using jQuery?

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

Answer 1

Core jQuery has nothing special for touch events, but you can easily create your own using the following events

• touchstart
• Touchmove
• touchend
• touchcancel

For example, 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 (including android).

Here is some good documentation:

Answer 2

If you use jQuery 1.7+, this is even simpler than all the other answers.

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

Answer 3

The easiest way is to use a multi-touch JavaScript library such as Hammer.js . Then you can write code, for example:

 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. Touch events also fire when equivalent mouse actions occur, so you don't need to write two sets of event handlers. Oh, and you need a jQuery plugin if you want me to be able to write in jQueryish the way I do.

Answer 4

You can use .on () to capture multiple events, and then check the touch screen, for example:

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

Answer 5

jQuery Core has nothing special, but you can read on the jQuery Mobile Events page about various touch events that also work on devices other than iOS devices.

It:

• click
• taphold
• napkins
• swipeleft
• swiperight

Please also note that during scroll events (based on touch on mobile devices) iOS devices freeze DOM manipulations during scrolling.

Answer 6

Using touchstart or touchhend is not a good solution, because if you scroll the page, the device detects it as a tap or tap. Thus, the best way to simultaneously detect a click and click event is to simply detect touch events that do not move the screen (scrolling). Therefore, for this, simply 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 great for me on iPad and iPhone. It detects taps and can easily distinguish between touch and touch.

Answer 7

I was a little worried that I only used touchmove for my project, as it only works when your touch moves from one place to another (and not from the initial touch). So I combined it with touchstart, and it 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> 

Answer 8

I know I was a little late for this, but just tested the benmajor GitHub jQuery Touch Events plugin for versions 1.4 and 1.7+ of jQuery. It is lightweight and works great with on and bind , while providing support for a comprehensive set of touch events.