Prevent Swipe From Triggering Ng-click Handler

I'm working on implementing an iOS-like swipe-to-delete gesture on HTML table rows. For example, a leftwards swipe on Site11 will turn it from a standard row: into a delete-able

Solution 1:

I also met this situation and I finally found a tricky way to do that. The $event.stopPropagation() mentioned somewhere only works in ngClick. Even writing a custom swipe directive by $swipe with event.stopPropagation() cannot prevent ngClick... So...

$swipe service will trigger both 'touch' and 'mouse' events by default. So does ngSwipeLeft and ngSwipeRight directives. So when you do the swipe, it will trigger events by the following order:

1. touchStart
2. touchMove
3. touchEnd
4. mouseDown
5. mouseUp
6. click

I tested by mouse drag not touch directly, but my app will run on a touch screen on PC, and the swipe on this touch screen is emulating mouse drag. So the event type of $swipe service 'end' event in my app is 'mouseup'. Then you can use a flag to do something like this:

<divng-swipe-left="swipeFunc(); swiping=true;"ng-click="swiping ? ( swiping = false ) : clickFunc();">
   ...
</div>

or

<divng-swipe-left="swipeFunc(); swiping=true;"ng-mouseup="clickFunc();"ng-click="swiping=false;">
  ...
</div>

with clickFunc() like following:

$scope.clickFunc = function() {
   if( $scope.swiping ) { return; }
   // do something
}

This works for me. I hope this is also useful for you.

Solution 2:

I'm having this same problem right now as well, and indeed only on a desktop browser. I thought that preventDefault() or stopImmediatePropagation() would do the trick but no. However, I did find a solution for it though. Try this:

angular.module('app', [])
.directive('noSwipeClick', function () {
    returnfunction(scope, elm) {
        var el = angular.element(elm);
        el.bind('click', function(e) {
          if(scope.swipe.swiping === true) {
            e.stopPropagation();
            e.preventDefault();
          }
        });
    };
});

And in your HTML:

<divclass="list-item"><span>{{item.Name}}</span><divng-class="{true: 'is-visible', false: ''}[item.Id === swipeDeleteItemId]"><divno-swipe-clickclass="delete-item-swipe-button"ng-mousedown="$event.stopPropagation();"ng-click="$event.stopPropagation();">Delete</div></div></div>

Don't forget to assign $scope.swipe.swiping = true in your controller when actually swiping and setting it to false when done