Skip to content

Instantly share code, notes, and snippets.

@attenzione
Last active January 1, 2023 21:45
Show Gist options
  • Star 43 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save attenzione/7098476 to your computer and use it in GitHub Desktop.
Save attenzione/7098476 to your computer and use it in GitHub Desktop.
/*
* 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);
@enes-oerdek
Copy link

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

@enes-oerdek
Copy link

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
Copy link

[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
Copy link

husa commented Feb 18, 2015

@Enesbil to detect that event isn't multitouch

if (e.touches && e.touches.length > 1) {
  return;
}

@daniel-990
Copy link

thanks!!! :) 👍

@thdoan
Copy link

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
Copy link

yairEO commented Feb 13, 2016

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

@eldyvoon
Copy link

eldyvoon commented Nov 5, 2016

@yairEO, how does that different than this one?

@zanderwar
Copy link

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

@VigibotDev
Copy link

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

@attenzione
Copy link
Author

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
}

@VigibotDev
Copy link

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

@attenzione
Copy link
Author

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

@VigibotDev
Copy link

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
Copy link

Awesome !!!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment