Prevent swipe from triggering ng-click handler

angularjs, angularjs-ng-click, javascript, swipe

Solution

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:

- touchStart

- touchMove

- touchEnd

- mouseDown

- mouseUp

- 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:

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

or

<div ng-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.

Problem

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 row: I have this functionality working with the `ng-swipe-left` directive. However, I also have a `ng-click` directive on each row that navigates to a different view of the application. Currently, both events are triggered when I perform a swipe on a row, except when the swipe ends on the "Site11" text itself, as opposed to anywhere else within the row. For example, this gesture will trigger both the `ng-click` and the `ng-swipe-left` handlers: but this gesture will only trigger the `ng-swipe-left` handler: How can I prevent the `ng-click` handler from being fired if a swipe is performed on the row, regardless of where the swipe ends? Here's the gist of my HTML structure that defines each row: ``` <tr ng-repeat="item in items"> <td ng-click="openDetailPane()" ng-swipe-left="$parent.swipeDeleteItemId = item.Id" ng-swipe-right="$parent.swipeDeleteItemId = 'none'"> <div list-item></div> </td> <td> <i class="fa fa-angle-right fa-2x" /> <span>{{item.ChildCount}}</span> </td> </tr> ``` The delete button is defined inside the `list-item` directive; it is only visible if its ID matches the `swipeDeleteItemId` property on the controller: ``` <div class="list-item"> <span>{{item.Name}}</span> <div ng-class="{true: 'is-visible', false: ''}[item.Id === swipeDeleteItemId]"> <div class="delete-item-swipe-button" ng-mousedown="$event.stopPropagation();" ng-click="$event.stopPropagation();">Delete</div> </div> </div> ``` I should mention that I've only tried this in the desktop versions of Chrome and IE11 - I'm assuming a click and drag from a mouse registers identically to a swipe on a mobile device.

Original source