Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
/*
* jQuery Double Tap
* Developer: Sergey Margaritov (github.com/attenzione)
* License: MIT
* Date: 22.10.2013
* Based on jquery documentation http://learn.jquery.com/events/event-extensions/
*/
(function($){
$.event.special.doubletap = {
bindType: 'touchend',
delegateType: 'touchend',
handle: function(event) {
var handleObj = event.handleObj,
targetData = jQuery.data(event.target),
now = new Date().getTime(),
delta = targetData.lastTouch ? now - targetData.lastTouch : 0,
delay = delay == null ? 300 : delay;
if (delta < delay && delta > 30) {
targetData.lastTouch = null;
event.type = handleObj.origType;
['clientX', 'clientY', 'pageX', 'pageY'].forEach(function(property) {
event[property] = event.originalEvent.changedTouches[0][property];
})
// let jQuery handle the triggering of "doubletap" event handlers
handleObj.handler.apply(this, arguments);
} else {
targetData.lastTouch = now;
}
}
};
})(jQuery);
@henryhu712

This comment has been minimized.

Copy link

@henryhu712 henryhu712 commented Nov 2, 2013

How to use it?

@enes-oerdek

This comment has been minimized.

Copy link

@enes-oerdek enes-oerdek commented Nov 8, 2013

Very useful! Thanks : )
You use it like this:
$(SELECTOR).on('doubletap',function(event){
alert('doubletap');
});

@enes-oerdek

This comment has been minimized.

Copy link

@enes-oerdek enes-oerdek commented Nov 8, 2013

Sorry for double-post, I want to make a little suggestion/addition.

To seperate multitouch (e.g. zoom) from doubletap, you can change the minimum delta in die if-clause. Like this:
if (delta < delay && delta > 50)
instead of:
if (delta < delay && delta > 0)

Kind regards

@mcareycow

This comment has been minimized.

Copy link

@mcareycow mcareycow commented Feb 12, 2014

[See Final EDIT below....]
Hello, when I attempted to integrate this js, the code that assigns the event handler to a canvas element throws this error: TypeError: 'undefined' is not a function (evaluating '$(placedItemObj.itemCanv).on('doubletap',function(event){
alert('doubletap');
})')

any thoughts on what I am doing wrong? [EDIT] In changing '.on' to '.bind' the error is no longer thrown but the event also does not bind to the selector. I should note that even when I backed up and attempted to implement the multi-click sample event here http://learn.jquery.com/events/event-extensions/ (upon which this extension is said to be modeled), I got the same error. I should also note that I verified that the custom event handler code is definitely being included, after the main jQuery js and before this code is called.

[Final EDIT] My apologies - the error I was getting was caused by an outdated local version of jQuery. Updating jQuery to http://code.jquery.com/jquery-1.11.0.min.js totally removed the error and allowed the event to fire as expected.

@husa

This comment has been minimized.

Copy link

@husa husa commented Feb 18, 2015

@enesbil to detect that event isn't multitouch

if (e.touches && e.touches.length > 1) {
  return;
}
@daniel-990

This comment has been minimized.

Copy link

@daniel-990 daniel-990 commented Dec 11, 2015

thanks!!! :) 👍

@thdoan

This comment has been minimized.

Copy link

@thdoan thdoan commented Dec 28, 2015

There doesn't appear to be a way to pass a delay value, but it's a great plugin nonetheless 👍

@yairEO

This comment has been minimized.

Copy link

@yairEO yairEO commented Feb 13, 2016

I've made a tiny custom event which is superior - https://github.com/yairEO/touchy

@eldyvoon

This comment has been minimized.

Copy link

@eldyvoon eldyvoon commented Nov 5, 2016

@yairEO, how does that different than this one?

@zanderwar

This comment has been minimized.

Copy link

@zanderwar zanderwar commented Sep 3, 2019

@yairEO You have used tabs AND spaces, and have left debugging code in there...

@Serveurperso

This comment has been minimized.

Copy link

@Serveurperso Serveurperso commented Sep 25, 2019

Hello, It need a filter for two finger multitouch usage !
The filter must discard two different location taps !

@attenzione

This comment has been minimized.

Copy link
Owner Author

@attenzione attenzione commented Oct 1, 2019

Hello, It need a filter for two finger multitouch usage !
The filter must discard two different location taps !

You need to parse event params:

if (e.touches && e.touches.length === 2) {
  // two finger multitouch event
}
@Serveurperso

This comment has been minimized.

Copy link

@Serveurperso Serveurperso commented Oct 1, 2019

This is a part of the work yes, now the filter must discard two different location taps

@attenzione

This comment has been minimized.

Copy link
Owner Author

@attenzione attenzione commented Oct 1, 2019

This is a part of the work yes, now the filter must discard two different location taps

Nice, I can't give you an answer with one row of code, you need to implement some logic with event touches coordinates

@Serveurperso

This comment has been minimized.

Copy link

@Serveurperso Serveurperso commented Oct 1, 2019

Sorry for my english I'm French:) Yes it's mandatory because when we slide with two fingers there is a lot bad taps received and this frequently make a false double tap.
just store the last tap coordinate and make a difference with the new one to get the delta. If delta > tolerance; return.
There is no need for touches.length check.

@Senior-Hayato-Suzuki

This comment has been minimized.

Copy link

@Senior-Hayato-Suzuki Senior-Hayato-Suzuki commented Apr 4, 2020

Awesome !!!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.