取消对孩子的ng-swipe-right [英] Cancel ng-swipe-right on child
问题描述
在我的角度应用程序中，主体的左右两侧分别具有ng-swipe以切换侧栏.问题是当我的页面上有可滚动的水平DIV时.由于身体滑动，它不会滚动.
In my angular application, the body has a ng-swipe right and left to toggle a sidebar. The problem is when in my page I have a scrollable horizontal DIV. It won't scroll because of the swipe of the body.
<body ng-swipe-right="sidebar = true" ng-swipe-left="sidebar = false">
<div class="scrollable-x">long content that overflow on x</div>
</body>
有没有办法防止滑动并让子元素滚动?
Is there a way to prevent from swiping and to let the scroll of the child element?
我尝试在div的滑动上设置$event.stopPropagation()，以便不再滚动滚动条，但内容不会滚动.
I tried to set $event.stopPropagation() on the swipe of the div so the scrollbar is not toggled anymore but the content won't scroll.
有什么主意吗?
推荐答案
更新
看着 allenhwkim 的答案，他确实是对的，可以很容易地阻止$event的传播.我认为这是理所当然的(未经检查)，将ng-swipe-*指令附加到其他元素将开始触发单独的事件.我显然是错的.
UPDATE
Looked at allenhwkim's answer and indeed he is correct, that $event's propagation can be easily stopped. I took it for granted (without checking), that attaching ng-swipe-* directive to other element will start firing separate events. I was clearly wrong.
这里已更新为小提琴.
下面的答案基本上是垃圾.
stopPropagation仍然存在一个问题-鼠标向上事件似乎没有触发.
There is still one problem with stopPropagation -- the mouse up event seems not to fire.
最优雅的解决方案是装饰ng-swipe-*指令或$swipe服务-但是查看它们的代码，我认为这是不可能的.
The most elegant solution would be to decorate the ng-swipe-* directives or $swipe service -- but looking into their code and I do not think it is possible.
其他选择是创建自己的指令，该指令将手动附加ng-swipe-*，负责编译过程并提供所需的功能.当然，有点复杂.
Other option would be to create your own directive, that would manually attach ng-swipe-*, take care of the compilation process and provide desired functionality. Surely, bit complicated.
我想到的是一个快速破解.想法是向元素的后代添加一个属性，该元素的后代不应触发ng-swipe-*.
What I came up with is a quick hack. The idea is to add an attribute to an element whose descendants should not fire the ng-swipe-*.
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">
- 在android chrome中.v.39 angular-panhandler 已损坏.
-
$event存储适当的触摸事件(Android的镶边)或自定义事件(桌面的镶边)；在后一种情况下，$event.fromElement始终为null. - 提出的解决方案是一个快速的技巧-它既不优雅也不通用.尽管如此，从理论上讲，可以通过在
swipe属性中设置不同的值来支持多个ng-swipe-*处理程序.
- in android's chrome.v.39 angular-panhandler is broken.
$eventstores a proper touch event (android's chrome) or a custom event (desktop's chrome); in the latter case$event.fromElementis alwaysnull.- The proposed solution is a quick hack -- it is neither elegant nor general. Nonetheless, theoretically it could be possible to support multi
ng-swipe-*handlers by setting different values inswipeattribute.
这篇关于取消对孩子的ng-swipe-right的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
