Question

在我的角度应用中，身体左右有ng-swipe来切换侧边栏。问题是在我的页面中我有一个可滚动的水平DIV。由于身体的滑动，它不会滚动。

<body ng-swipe-right="sidebar = true" ng-swipe-left="sidebar = false">
    <div class="scrollable-x">long content that overflow on x</div>
</body>

有没有办法防止滑动并让子元素滚动？

我尝试在div的滑动上设置$event.stopPropagation()，因此滚动条不再切换，但内容不会滚动。

有什么想法吗？

Answer 1

更新

看着 allenhwkim 的回答，确实他是对的，$event的传播可以很容易地停止。我认为它是理所当然的（没有检查），将ng-swipe-*指令附加到其他元素将开始触发单独的事件。我显然是错的。

HERE更新了小提琴。

~~以下答案基本上都是垃圾。~~

stopPropagation仍然存在一个问题 - 鼠标启动事件似乎无法启动。

最优雅的解决方案是装饰ng-swipe-*指令或$swipe服务 - 但查看他们的代码并且我认为不可能。

其他选项是创建自己的指令，手动附加ng-swipe-*，处理编译过程并提供所需的功能。当然，有点复杂。

我想出的是快速入侵。我们的想法是为一个元素添加一个属性，该元素的后代不应该触发ng-swipe-*。

JS

myApp.value('shouldFire', function(element){
     var update = true;

        // strange enough $event.fromElement is always null
        var current = element;
        while(current && current != document.body){
            if(current.getAttribute('swipe')=='cancel'){
                update = false;
                break;
            }
            current = current.parentElement;
        }

        return update;
})

function MyCtrl($scope, shouldFire) {
    $scope.sidebar = false;

    $scope.updateSidebar = function($event, show){

        var element = $event.toElement || $event.srcElement; 
        shouldFire(element) && ($scope.sidebar = show);

    }
}

HTML

<div class="cont" ng-swipe-right="updateSidebar($event, true)"
    ng-swipe-left="updateSidebar($event, false)">

...

<div class="pan-container" panhandler=""
   content-width="500px" swipe="cancel">

UPDATED DEMO

警告

angular-panhandler

已损坏。
~~$event存储正确的触摸事件（机器人的chrome）或自定义事件（桌面的Chrome）;在后一种情况下，$event.fromElement始终为null。~~
建议的解决方案是一个快速的黑客 - 它既不优雅也不一般。尽管如此，理论上可以通过在ng-swipe-*属性中设置不同的值来支持多swipe个处理程序。

Answer 2

$event.stopProgagation()必须有效。我不知道你为什么不工作。

http://plnkr.co/edit/AqczfhAVGMXNOcJij0JE?p=preview

  var app = angular.module('myApp',['ngTouch']);
  app.controller("MyCtrl", function($scope) {
    $scope.void = function(evt){
      evt.stopPropagation();
    }
  });

对我来说，常识是左/右滑动和向左滚动是不同的。

滑动就是快速移动。如果你不快速行动。它没有滑动。当您慢慢滚动时，不会进行滑动。

我认为所有用户都知道这一点（可能不是）。如果没有，我会建议使用UX方法让用户慢慢滚动通过显示一些按钮或其他任何东西，并保持滑动原样。

无论如何，有一种方法可以使用stopPropagation

禁用滑动

如果此plnkr不符合您的要求，请告诉我。

Answer 3

就是这样。在你的可滚动元素中（通常它是你设置为 overflow-x：滚动的dom元素），添加 ng-swipe-right =“preventScrollingFunction（$ event）”，就像这样：

<div ng-swipe-right="preventScrollingFunction($event)">...</div>

然后，在范围内创建函数：

$scope.preventScrollingFunction = function($event) {
    $event.stopPropagation();
}

应该这样做！

注意：请确保该功能的参数完全是 $ event ，因为它是由Angular引起的，如果您将其命名为 $ evt 或 $ e 或者其他什么，它不会工作。

取消对孩子的轻扫

3 个答案:

更新

JS

HTML

警告