Double tap on mobile safari

Question

Is there a way to bind to a double-touch event (in one line of code) for a mobile safari? Or is an alternative to intercepting two single-click events that occurred in a short time (example: http://appcropolis.com/blog/implementing-doubletap-on-iphones-and-ipads/ )?

Answer 1

Short answer: you have to implement in two clicks.

Actual answer: The following is an implementation without using jQuery double-touch for mobile safari, which requires only one line of code (to enable the dblclick event):

• https://gist.github.com/2927073

In addition, you will need to disable the default gadget for Safari for mobile using this meta tag:

<meta name="viewport" content="width=device-width,user-scalable=no" /> 

Answer 2

If you want to double click on both the browser platform and the iOS platform, you must have the following code:

 jQuery.event.special.dblclick = { setup: function(data, namespaces) { var agent = navigator.userAgent.toLowerCase(); if (agent.indexOf('iphone') >= 0 || agent.indexOf('ipad') >= 0 || agent.indexOf('ipod') >= 0) { var elem = this, $elem = jQuery(elem); $elem.bind('touchend.dblclick', jQuery.event.special.dblclick.handler); } else { var elem = this, $elem = jQuery(elem); $elem.bind('click.dblclick', jQuery.event.special.dblclick.handler); } }, teardown: function(namespaces) { var agent = navigator.userAgent.toLowerCase(); if (agent.indexOf('iphone') >= 0 || agent.indexOf('ipad') >= 0 || agent.indexOf('ipod') >= 0) { var elem = this, $elem = jQuery(elem); $elem.unbind('touchend.dblclick'); } else { var elem = this, $elem = jQuery(elem); $elem.unbind('click.dblclick', jQuery.event.special.dblclick.handler); } }, handler: function(event) { var elem = event.target, $elem = jQuery(elem), lastTouch = $elem.data('lastTouch') || 0, now = new Date().getTime(); var delta = now - lastTouch; if (delta > 20 && delta < 500) { $elem.data('lastTouch', 0); $elem.trigger('dblclick'); } else { $elem.data('lastTouch', now); } } }; 

Try it here:

http://jsfiddle.net/UXRF8/

Answer 3

Cancel the dblclick event and use bind , live , on , delegate as for any other event:

 jQuery.event.special.dblclick = { setup: function(data, namespaces) { var elem = this, $elem = jQuery(elem); $elem.bind('touchend.dblclick', jQuery.event.special.dblclick.handler); }, teardown: function(namespaces) { var elem = this, $elem = jQuery(elem); $elem.unbind('touchend.dblclick'); }, handler: function(event) { var elem = event.target, $elem = jQuery(elem), lastTouch = $elem.data('lastTouch') || 0, now = new Date().getTime(); var delta = now - lastTouch; if(delta > 20 && delta<500){ $elem.data('lastTouch', 0); $elem.trigger('dblclick'); }else $elem.data('lastTouch', now); } };