ngSwipe和水平滚动

Ant*_*una 16 javascript javascript-events touch angularjs

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

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

self.onInnerSwipe = function($event) {
  $event.originalEvent.preventAction = true;
};
Run Code Online (Sandbox Code Playgroud)

然后在父母身上:

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

self.goToPrev = function($event) {
  if (shouldActionProceed($event)){
    // Do Magic
  }
}
Run Code Online (Sandbox Code Playgroud)

如果我在该元素上滑动但滚动不能正常工作,这就行动不会继续.它有种类,但事实并非如此.它开始一点然后停止.

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

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

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

任何提示?

Thi*_*PXP 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'?
};
Run Code Online (Sandbox Code Playgroud)

这样,父事件就可以继续工作。

  • 这应该作为答案被删除,因为它将被错误地自动授予,并且它不能解决问题。 (2认同)