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

我正致力于在HTML表格行上实现类似于iOS的滑动删除手势。例如，在

site1

上向左滑动将使其从标准行转到：

进入可删除的行：

我将此功能与

ng swipe left

指令配合使用。但是，我在导航到应用程序不同视图的每一行上都有一个

ng click

指令。目前，当我在一行上执行刷卡时，这两个事件都会被触发，除非刷卡结束于“Site11”文本本身，而不是该行中的任何其他位置。例如，此手势将触发

ng单击

和

ng向左滑动

处理程序：

但此手势只会触发

ng向左滑动

处理程序：

如果对行执行了刷卡，无论刷卡在哪里结束，如何防止触发

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>

---

我应该提到的是，我只在Chrome和IE11的桌面版本中尝试过这一点——我假设鼠标的点击和拖动与移动设备上的滑动注册相同。

我现在也遇到了同样的问题，而且实际上只在桌面浏览器上。我认为

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>

{{item.Name}
删除

---

在实际刷卡时，不要忘记在控制器中指定

$scope.swipe.swiping=true

，并在完成时将其设置为false

我也遇到了这种情况，我终于找到了一种巧妙的方法来实现这一点。
此处提到的

$event.stopPropagation（）

仅在ngClick中有效。即使通过

$swipe

与

事件一起编写自定义滑动指令。stopPropagation（）

也无法阻止ngClick。。。所以

$swipe

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

触控启动

触动

接触端

穆斯敦

鼠标

点击

我测试了鼠标拖动而不是直接触摸，但我的应用程序将在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-click="swiping ? ( swiping = false ) : clickFunc();">
   ...
</div>

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

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