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.
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:
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With