MultiGesture Event

ionic-v1
1

Hi,
I was wondering if it was possible to use multiple gesture event as doubleTap, tap on one element.

For exemple you got one div which support at the same time a double Tap and a tap ?

1 Like
2

If you mean you want to catch a double-tap tap, not sure. But, if you mean you want to catch a double-tap and do one thing and tap to do another, then yes that is possible.

Something like…

function imageDoubleTapGesture(event) {
 // do something with doubletaps
}

function imageTapGesture(event) {
// do something with taps
}

// assuming you are attaching this to some image named imageObj (could be any element)

var imageDoubletapGesture = $ionicGesture.on('doubletap', handleDoubleTap, imageObj)
var imageTapGesture = $ionicGesture.on('tap', handleTap, imageObj)

// clean up
scope.$on('$destroy', function() {
  $ionicGesture.off(imageDoubletapGesture, 'doubletap', handleDoubleTap)
  $ionicGesture.off(imageTapGesture, 'doubletap', handleTap)
}
1 Like
3

Yes that was exactly that :wink: Thanks you !

I complicated everything with my directive :smile:

4

I’m trying to do a similar thing

$ionicGesture.on('tap', function(){
    console.log('Tap');
}, element);

$ionicGesture.on('doubletap', function(){
    console.log('doubletap');
}, element);

But when I double tap, the tap event is also firing twice. So get logs like

'tap'
'doubletap'
'tap'

I’d rather not have the tap event fire if a double tap is occuring. Is this possible?

5

Have you resolved this problem?
I am trying to do the same thing but the tap event is fired before the double tap.

Thanks

6

Hey @Earl, I wasn’t able to resolve it, I just ended up doing a single tap for the functionality I needed. Sorry!

7

Any luck with this ?

I’m having the same issue with tap and double tap. When I do a doubleTap it triggers tap -> doubletap -> tap

Any suggestions ?

8

Think I manage to fix/hack it. Not a pretty solution but it does the job and can serve as a starting point for something

 var isDoubleTapAction = false;

 var imageDoubleTapGesture = function imageDoubleTapGesture(event) {
    
    isDoubleTapAction = true;
            
    $timeout(function(){
      isDoubleTapAction = false;
      //HandleDoubleTap
    },200);
  }

  var imageTapGesture = function imageTapGesture(event) {
    
    if(isDoubleTapAction === true){
      return;
    }
    else{
      $timeout(function(){
        if(isDoubleTapAction === true){
          return;
        }
        else{
          //HandleTap
        }
      },200);
    }
  }
  
  var doubleTapEvent = $ionicGesture.on('doubletap', imageDoubleTapGesture, element);
  var tapEvent = $ionicGesture.on('tap', imageTapGesture, element);
  
  scope.$on('$destroy', function() {
    $ionicGesture.off(doubleTapEvent, 'doubletap', imageDoubleTapGesture);
    $ionicGesture.off(tapEvent, 'tap', imageTapGesture);
  });
9

I have made this directive. Hope it help someone.

See the Pen Tap and Double Tap Ionic by Vikas Gautam (@Vikasg7) on CodePen.