-
-
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); |
Very useful! Thanks : )
You use it like this:
$(SELECTOR).on('doubletap',function(event){
alert('doubletap');
});
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
[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.
@Enesbil to detect that event isn't multitouch
if (e.touches && e.touches.length > 1) {
return;
}
thanks!!! :) 👍
There doesn't appear to be a way to pass a delay value, but it's a great plugin nonetheless 👍
I've made a tiny custom event which is superior - https://github.com/yairEO/touchy
@yairEO, how does that different than this one?
@yairEO You have used tabs AND spaces, and have left debugging code in there...
Hello, It need a filter for two finger multitouch usage !
The filter must discard two different location taps !
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
}
This is a part of the work yes, now the filter must discard two different location taps
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
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.
Awesome !!!
How to use it?