Loading...

Search jQuery

Search

jQuery Forum

doubletap event

in jQuery Mobile • 7 years ago

Hi all,

I am working on a project which requires me to use jQuery mobile and phonegap. I wanted to handle a double tap event but surprisingly it isn't present by default in jQuery mobile. There is a plugin for handling doubletap in iPad and iPhone but unfortunately I am working on android and that plugin doesn't work.

Any help would be greatly appreciated.

2

Replies(4)

AssafD

Re: doubletap event

7 years ago

You can do something like this:

The plugin:

(function($) {
$.fn.doubleTap = function(doubleTapCallback) {
return this.each(function(){
var elm = this;
var lastTap = 0;
$(elm).bind('vmousedown', function (e) {
var now = (new Date()).valueOf();
var diff = (now - lastTap);
lastTap = now ;
if (diff < 250) {
if($.isFunction( doubleTapCallback ))
{
doubleTapCallback.call(elm);
}
}
});
});
}
})(jQuery);

And to use it something like this:

// put class="doubleTap" on the elements you need to double tap
$(".doubleTap").doubleTap(function(){
// 'this' is the element that was double tap
});

Note: the 250 milli diff (in line 10) is just a magic numer who seems to work.

You may need to play with this number to get the best behavior

Re: doubletap event

7 years ago

Thanks AssafD it works perfectly!

Re: doubletap event

7 years ago

Override dblclick event and use bind, live, on, delegate like 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);
}
};

Re: doubletap event

5 years ago

I've made a special event extension that handles both tap and double-tap:

https://github.com/yairEO/doubletap