防止swipe触发ng单击处理程序

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>

delete按钮是在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. mouseDown
5. mouseUp
6. 点击

我测试鼠标拖动不直接触摸，但我的应用程序将运行在触摸屏上的PC，并在这个触摸屏上的滑动是模仿鼠标拖动。所以我的应用程序中的$swipe服务'end‘事件的事件类型是'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
}

这对我有用。我希望这对你也有帮助。

Answer 2

我现在也遇到了同样的问题，而且确实只有在桌面浏览器上。我原以为preventDefault()或stopImmediatePropagation()能做到这一点，但没有。不过，我确实找到了解决办法。试试这个：

angular.module('app', [])
.directive('noSwipeClick', function () {
    return function(scope, elm) {
        var el = angular.element(elm);
        el.bind('click', function(e) {
          if(scope.swipe.swiping === true) {
            e.stopPropagation();
            e.preventDefault();
          }
        });
    };
});

在HTML中：

<div class="list-item">
  <span>{{item.Name}}</span>
  <div ng-class="{true: 'is-visible', false: ''}[item.Id === swipeDeleteItemId]">
    <div no-swipe-click class="delete-item-swipe-button" 
     ng-mousedown="$event.stopPropagation();" 
     ng-click="$event.stopPropagation();">Delete</div>
  </div>
</div>

当实际滑动时，不要忘记在控制器中分配$scope.swipe.swiping = true，并在完成时将其设置为false