防止滑动触发ng-click处理程序

Question

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

进入可删除的行:

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

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

ng-click如果在行上执行滑动,无论滑动在何处结束,如何防止处理程序被触发？

这是我的HTML结构的要点,它定义了每一行:

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

删除按钮在list-item指令内定义; 只有当它的ID与swipeDeleteItemId控制器上的属性匹配时才可见:

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

我应该提一下,我只在Chrome和IE11的桌面版本中试过这个 - 我假设从鼠标注册中单击并拖动与移动设备上的滑动相同.

Answer 1

我也遇到了这种情况,我终于找到了一个棘手的方法来做到这一点.
在$event.stopPropagation()某处提到的只有在ngClick工作.即使通过编写自定义刷卡指令$swipe与event.stopPropagation()不能阻止ngClick ...所以...

$swipe默认情况下,服务将触发"触摸"和"鼠标"事件.ngSwipeLeft和ngSwipeRight指令也是如此.
因此,当您执行滑动时,它将按以下顺序触发事件:

1. touchStart
2. touchMove
3. touchEnd
4. 鼠标按下
5. mouseUp事件
6. 点击

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

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

要么

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

与clickFunc()类似以下内容:

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

这适合我.我希望这对你也有用.