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.