ngSwipe和水平滚动

时间:2015-06-05 10:21:12

标签: javascript angularjs javascript-events touch

我在移动设备上组合ng-swipe和水平滚动有问题。用例是我有一个页面,刷卡应该下一个或上一个加载,内部有模块显示很多信息。其中一些是滚动的。

因此,只要您滚动父母的滑动即可开始导航。所以我在可滚动元素的父级上添加了另一对ng-swipe,并带有这种技巧:

self.onInnerSwipe = function($event) {
  $event.originalEvent.preventAction = true;
};

然后是父母:

var shouldActionProceed = function($event) {
  return !$event || !$event.originalEvent || !$event.originalEvent.preventAction;
};

self.goToPrev = function($event) {
  if (shouldActionProceed($event)){
    // Do Magic
  }
}

如果我在该元素上滑动但滚动条没有真正起作用,那么这就完成了动作未进行的方法。它有种类,但它没有。它开始一点然后停止。

在Chrome上,有时会记录此警告

  

忽略尝试使用cancelable = false取消touchmove事件   例如,因为滚动正在进行中且无法中断。

我在这里准备了一个演示:http://jsbin.com/webologavu/2/这个过于简单,但你可以重现这个问题。

任何提示?

1 个答案:

答案 0 :(得分:2)

我认为这是这些事件的并发问题。如果您的父事件不依赖于子事件,它可能会更好。为此:

//add a identifier to your list element
<ul class="myList" your-other-attrs></ul>

//should proceed can rely on the target element to find out
//if the target element belongs (or is) in your list.
var shouldActionProceed = function($event) {
    return !$($event.target).hasClass("myList") &&  //is myList?
        $($event.target).parents(".myList").length == 0; //has parent 'myList'?
};

这样,父事件可以在其上工作。