在我的 Angular 应用程序中，主体的左右两侧都有一个ng-swipe来切换侧边栏。问题是当我的页面上有可滚动的水平DIV时。由于 body 滑动，它不会滚动。
<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()，以便不再滚动滚动条，但内容不会滚动。任何想法？
最佳答案
更新
看着allenhwkim的回答，确实他是正确的，可以很容易地阻止$event的传播。我认为这是理所当然的(未经检查)，将ng-swipe-*指令附加到其他元素将开始触发单独的事件。我显然错了。
HERE更新了 fiddle 。
下面的答案基本上是垃圾。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
警告
android chrome.v.39 angular-panhandler中的
$event存储适当的触摸事件(Android的镶边)或自定义事件(桌面的镶边)；在后一种情况下，$event.fromElement始终是null。 ng-swipe-*属性中设置不同的值来支持多个swipe处理程序。 关于angularjs - 取消对 child 的ng-swipe-right，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/25241168/