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

Question

我正在努力在 HTML 表格行上实现类似 iOS 的滑动删除手势。例如，向左滑动Site11会将其从标准行打开：

进入可删除行：

我有这个功能与ng-swipe-left指令一起工作。但是，我ng-click在每一行上都有一个指令，可以导航到应用程序的不同视图。目前，当我在一行上执行滑动时会触发这两个事件，除非滑动结束于“Site11”文本本身，而不是该行中的其他任何地方。例如，此手势将同时触发 theng-click和 theng-swipe-lefthandlers：

但这个手势只会触发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删除按钮在指令内部定义；swipeDeleteItemId仅当其 ID 与控制器上的属性匹配时才可见：

<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即使通过with编写自定义滑动指令event.stopPropagation()也无法阻止 ngClick... 所以...

$swipe默认情况下，服务将触发“触摸”和“鼠标”事件。ngSwipeLeft 和 ngSwipeRight 指令也是如此。
因此，当您进行滑动时，它将按以下顺序触发事件：

1. 触摸开始
2. 触摸移动
3. 触摸结束
4. 鼠标按下
5. 鼠标向上
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
}

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

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