Prevent href if hold gesture is fired

Hi, i’m developing an app that displays a list of items. This list has href, that goes to an specific page of every item, and also has a ‘hold’ gesture that displays an action sheet with some options (delete).

Here’s how i declare the hold directive:

angular.module('apollo.directives',[]).
  directive('onHold', function($ionicGesture){
    return {
      restrict: 'A',
      link: function($scope, $element, $attr) {
        var handleHold = function(e) {
          $scope.$eval($attr.onHold);
        };
        var holdGesture = $ionicGesture.on('hold', handleHold, $element);
        $scope.$on('$destroy', function(){
          $ionicGesture.off(holdGesture, 'hold', handleHold);
        });
      }
    }
  });

(Saw this code lately on this forum)

On the items, i have this code:

<ion-item ng-repeat="item in model.items" href="#/app/items/{{item._id}}" on-hold="itemOptions(item);" >

When i hold an item, options action sheet is displayed, but is going to href too. I’ve tried with e.stopPropagation, e.stopImmediatePropagation and e.preventDefault inside this function:

var handleHold = function(e) {
              //e.preventDefault();
              $scope.$eval($attr.onHold);
            };

I’ve also tried to change href by a function with $state.go(), but same behaviour.

Any advice on how to handle this? Thanks!

1 Like