防止滑动触发 ng-click 处理程序 [英] Prevent swipe from triggering ng-click handler

问题描述

我正致力于在 HTML 表格行上实现类似 iOS 的滑动删除手势.例如，在 Site11 上向左滑动会将其从标准行转向:

进入可删除的行:

我有这个功能与 ng-swipe-left 指令一起使用.但是，我在每行上还有一个 ng-click 指令，用于导航到应用程序的不同视图.目前，当我在一行上执行滑动时会触发这两个事件，除非滑动在Site11"文本本身结束，而不是在行内的任何其他地方.例如，此手势将同时触发 ng-click 和 ng-swipe-left 处理程序:

但是这个手势只会触发 ng-swipe-left 处理程序:

如果在行上执行滑动，我如何防止 ng-click 处理程序被触发，无论滑动在哪里结束?

以下是我定义每一行的 HTML 结构的要点:

<td ng-click="openDetailPane()"ng-swipe-left="$parent.swipeDeleteItemId = item.Id"ng-swipe-right="$parent.swipeDeleteItemId = 'none'"><div 列表项></div></td><td><i class="fa fa-angle-right fa-2x"/><span>{{item.ChildCount}}</span></td></tr>

删除按钮定义在 list-item 指令中；仅当其 ID 与控制器上的 swipeDeleteItemId 属性匹配时才可见:

<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();">删除</div>

我应该提一下，我只在 Chrome 和 IE11 的桌面版本中尝试过这个 - 我假设鼠标的点击和拖动与移动设备上的滑动完全相同.

解决方案

我也遇到过这种情况，我终于找到了一个棘手的方法来做到这一点.
某处提到的 $event.stopPropagation() 仅适用于 ngClick.即使通过 $swipe 和 event.stopPropagation() 编写自定义滑动指令也不能阻止 ngClick...所以...

$swipe 服务默认会同时触发 'touch' 和 'mouse' 事件.ngSwipeLeft 和 ngSwipeRight 指令也是如此.
所以当你进行滑动时，它会按以下顺序触发事件:

1. 触摸开始
2. 触摸移动
3. touchEnd
4. 鼠标按下
5. mouseUp
6. 点击

我通过鼠标拖动测试不是直接触摸，但我的应用程序将在 PC 的触摸屏上运行，并且在该触摸屏上滑动是模拟鼠标拖动.因此，我的应用中 $swipe 服务结束"事件的事件类型是mouseup".
然后你可以使用一个标志来做这样的事情:

...

或

...

使用 clickFunc() 如下:

$scope.clickFunc = function() {如果($scope.swiping){返回；}//做点什么}

这对我有用.我希望这对您也有用.

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:

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:

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

这篇关于防止滑动触发 ng-click 处理程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！