Javascript 滑动和水平滚动

我在移动设备上结合使用

ng滑动

和水平滚动时遇到问题。使用案例是，我有一个页面，在刷卡时应该加载下一个或上一个页面，其中有显示大量信息的模块。其中一些是滚动的

所以，只要你滚动鼠标滑动到父对象上，你就会被导航到。因此，我使用这种技巧在可滚动元素的父元素上放置了另一对

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事件的尝试 示例，因为滚动正在进行，无法中断

我在这里准备了一个演示：它过于简单化了，但您可以重现这个问题

---

有什么提示吗？

我认为这是这些事件的并发性问题。如果您的父事件不依赖子事件，它可能会工作得更好。为实现这一目标：

//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'?
};

//向列表元素添加标识符

//如果继续，可以依靠目标元素来发现
//如果目标元素属于（或在）您的列表中。
var shouldactionprocedure=函数（$event）{
return！$（$event.target）.hasClass（“myList”）&&&//是myList吗？
$（$event.target）.parents（“.myList”）.length==0；//是否有父级“myList”？
};

---

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

我发布了一个非常简短的答案。我很想进一步提供帮助，但我不确定我是否真的了解这个问题。我的理解是：您希望在父元素上轻扫以更改页面，而在ul内部元素上轻扫仅触发一个滚动；对吗？对，对。我希望能够正常水平滚动。我无法从android上获取您当前的代码。这是因为您试图禁用父/子控件。你能再举一个例子来说明我的原始行为或解释我做错了什么吗？它目前没有导航功能，但如果你滚动到应该显示“Swipped”的父项（灰色大框），就会触发一个警报。其目的是能够在图像库上水平滚动@如果这不合理，请告诉我。是的，现在我明白了。我想我知道怎么修了。如果我是对的，这是一个传播问题…你测试过这个吗，或者是猜测？我在这里测试过：没有发现任何奇怪的行为，但是我不完全确定你所说的“它有点工作，但它没有”是什么意思，所以你可能是测试它的最佳人选。这是OP说这不工作。我希望能够在移动设备上水平滚动。这是行不通的。“这是一种工作”，但它不是，你滚动，它可能是一个或两个像素，然后停止这应该被删除作为答案，因为它将被错误地自动授予，它不能解决问题。