Click event fired twice on touchhend in iPad

Question

I am using jquery animate for the slide. I have an arrow at the end of the slide and give a click event on that arrow. The job is to move one element inside silde per click and move the entire silde to mousedown. This works great on desktop computers, but on an iPad two items enter the slide in one click. I do not understand why the click event is fired twice on the iPad. Example code for a click:

$('#next_item').bind('mousedown touchstart MozTouchDown',function(e) { $('.slide').animate({left:left},6000); }); $('#next_item').bind('mouseup touchend MozTouchRelease',function(e) { No.nextItem(); }); 

#next_item is the arrow identifier at the end of the slide. I tried to execute the unbind touchstart and touchend event, but during scroll of the slide due to decoupling, the element does not fall inside the slide after one element. No.nextItem() moves one element inside the slide. left in $('.slide') - move the slide to the left. Please help me find a solution to why this is happening and how to solve this problem for ipad.

Answer 1

iPad understands touchstart / -end and mousestart / -end.

Dismissed as follows:

 ┌─────────────────────┬──────────────────────┬─────────────────────────┐ │Finger enters tablet │ Finger leaves tablet │ Small delay after leave │ ├─────────────────────┼──────────────────────┼─────────────────────────┤ │touchstart │ touchend │ mousedown │ │ │ │ mouseup │ └─────────────────────┴──────────────────────┴─────────────────────────┘ 

You need to determine if the user is on the tablet, and then relay it by touching ...:

 /******************************************************************************** * * Dont sniff UA for device. Use feature checks instead: ('touchstart' in document) * The problem with this is that computers, with touch screen, will only trigger * the touch-event, when the screen is clicked. Not when the mouse is clicked. * ********************************************************************************/ var isIOS = ((/iphone|ipad/gi).test(navigator.appVersion)); var myDown = isIOS ? "touchstart" : "mousedown"; var myUp = isIOS ? "touchend" : "mouseup"; 

and then tie it as follows:

 $('#next_item').bind(myDown, function(e) { 

You can also make an event that takes care of this, see:

http://benalman.com/news/2010/03/jquery-special-events/

The main normalized event is down:

 $.event.special.myDown = { setup: function() { var isIOS = ((/iphone|ipad/gi).test(navigator.appVersion)); var myDown = isIOS ? "touchstart" : "mousedown"; $(this).bind(myDown + ".myDownEvent", function(event) { event.type = "myDown"; $.event.handle.call(this, event); }); }, teardown: function() { $(this).unbind(".myDownEvent"); } }; 

After jQuery 1.9.0 $.event.handle changes the name to $.event.dispatch , you can write this backup to support both:

 // http://stackoverflow.com/questions/15653917/jquery-1-9-1-event-handle-apply-alternative // ($.event.dispatch||$.event.handle).call(this, event); $.event.special.myDown = { setup: function() { var isIOS = ((/iphone|ipad/gi).test(navigator.appVersion)); var myDown = isIOS ? "touchstart" : "mousedown"; $(this).bind(myDown + ".myDownEvent", function(event) { event.type = "myDown"; ($.event.dispatch||$.event.handle).call(this, event); }); }, teardown: function() { $(this).unbind(".myDownEvent"); } }; 

Answer 2

Be careful using UA sniffer for iPad / iPod. You throw away all Android devices with this solution! The best solution is to detect touch support, it will work on all Mobile / Tablet devices:

 var isTouchSupported = "ontouchend" in document; 

Answer 3

Expanding the answer of H Dog. Here is the code that worked for me.

 var isTouchSupported = "ontouchend" in document; if (isTouchSupported) { $('#playanimationbtn').off("mouseup"); $('#stopanimationbtn').off("mousedown"); $('#stopanimationbtn').off("click"); document.getElementById("playanimationbtn").addEventListener("touchend", PlayAnimation); document.getElementById("stopanimationbtn").addEventListener("touchend", StopAnimation); } else { $('#playanimationbtn').off("touchstart"); $('#playanimationbtn').off("touchend"); $('#playanimationbtn').off("touchmove"); $('#playanimationbtn').off("touchend"); $('#playanimationbtn').off("touchleave"); $('#stopanimationbtn').off("touchstart"); $('#stopanimationbtn').off("touchend"); $('#stopanimationbtn').off("touchmove"); $('#stopanimationbtn').off("touchend"); $('#stopanimationbtn').off("touchleave"); document.getElementById("playanimationbtn").addEventListener("click", PlayAnimation); document.getElementById("stopanimationbtn").addEventListener("click", StopAnimation); }