PDA

View Full Version : Tap, doubletap & taphold on one component



tobinharris
25 Jul 2010, 7:10 AM
Hi folks

I want to handle tap, doubletap and taphold separately for a single component, is there a code sample anywhere, I've not been able to nail it!

Tobin

meyerovb
25 Jul 2010, 3:46 PM
You can attach multiple events like those interactive ones to the component's element once it has been added to the page (or rendered, not sure, as it's not well documented yet). See my question asking for examples for a current method for attaching them (just add more listeners) http://www.sencha.com/forum/showthread.php?105114-Inline-method-for-attaching-dom-events

meyerovb
25 Jul 2010, 3:49 PM
Search this forum for my post with subject: Inline method for attaching dom events
Has an example that currently works, but you need to wait for the element to be added/rendered/instantiated (not sure which yet)

meyerovb
25 Jul 2010, 3:53 PM
They really need to stop monitoring posts that include hyperlinks to other posts...

http://www.sencha.com/forum/showthread.php?105114

Especially seeing that you can just edit a post to include it :)

tobinharris
26 Jul 2010, 11:51 AM
Thanks guys.

My bad, I phrased my question wrong :S

I'm really interested in how you tell the difference between which event was raised, "tap" seems to always get called. I tried a couple of tricks, and inspecting the dom, but couldn't find a clean solution.

I also saw another post that said, "just do it the way you would normally". Anyone know what the regular approach to this is?

Tobin

meyerovb
26 Jul 2010, 12:18 PM
Tab gets fired before doubletap (and probably taphold as well) just as click gets fired before doubleclick. Most of the other events like slide and pinch are based of base events like tap if you look in the event manager.

tobinharris
26 Jul 2010, 2:05 PM
Thanks for the reply. I was really interested in setting up and handling both doubletap and tap on one component, without them interfering with each other! The problem is that tap always gets called first, do how do you know it's a double tap?

Anyway, this seems to work well (add to your Container/Component or whatever)...



setupEventHandlers: function(){
this.mon(this.el, {
tap: function(e){
if(this.delayedTask == null){
//setup a delayed task that is called IF double click is not later detected
this.delayedTask = new Ext.util.DelayedTask(
function(){
this.doSomethingInteresting();
this.delayedTask = null;
}, this);

//invoke (with reasonable time to cancel)
this.delayedTask.delay(300);
}
},
doubletap: function(e){
//cancel and clear the queued single click tasks if it's there
if(this.delayedTask != null){
this.delayedTask.cancel();
this.delayedTask = null;
}

//handle the double click
this.doSomethingReallyInteresting();
},
scope: this
});
},

meyerovb
26 Jul 2010, 2:10 PM
Yep, that's pretty much the universal single/double method... the millisecond time is tweaked by your design dept, then you move on :)

stefx
20 Aug 2010, 1:06 AM
sorry but I don't understand where put this code.
I've a list.. How to manage this events?

thanks a lot
Stefano

JordiMundo
13 Jun 2014, 5:53 AM
Hey, I found a way with no delay if anyone is still tooking after it...if I apply singletap, taphold and touchend there is a combination to do which allow each event to happen with no delay and attach different functionality to them...


taphold: function(ev,el){
function(){//do your things};
this.longpressed = true;
window.setTimeout(function(scope){
scope.longpressed = false;
scope.isTouchended = false;
}, 500, this)
},
singletap: function(ev,el){
if(this.isTouchended){
this.isTouchended = false;
function(){//do your things};
}
},
touchend: function(){
if(!this.longpressed){
this.isTouchended = true;
}
}