Angular ng-儿童防刷

Question

如何防止子元素上的默认设置？

我有content元素：

<div id="content" class="full" ng-swipe-right="openSwipeNav(allowSwipe); swiping = true" ng-swipe-left="closeSwipeNav(allowSwipe); swiping = true" ng-mouseup="closeNav($event)" ng-click="swiping=false;">

这个#中的内容是：

<input type="range">

但它不起作用。我可以移动范围滑块一点点，当然它会触发打开导航。当我删除ng-swipe right&ng-swipe left时，它工作正常。

我尝试了这个解决方案：link

但它仍然不适用于范围输入...

有什么建议吗？

Answer 1

有几种不同的方法可以实现这一点。

请记住，滑块和内容都会捕获相同的swipe事件。此外，因为滑块是内容的子对象，所以当您滑动它时，事件首先由滑块接收，然后冒泡到内容。因此，您可以在slider滑动的处理程序中停止事件的传播。

或者，如果您想更详细地了解它，可以在内容的向左滑动处理函数中捕获事件，检查它的目标，并确认它不包含作为其目标的滑块元素。

也许可以创建一个名为'disableSwipe‘的指令，它绑定到触摸事件，并阻止它们传播到范围元素。

myApp.directive('disableSwipe', function(){
  return {
    link: function (scope, element, attrs) {
          var disableSwipeListener = function(event) {
          console.log('mm')
          event.stopPropagation();
      }
      $(element).on("mousedown", disableSwipeListener);
      $(element).on("mousemove", disableSwipeListener);
      $(element).on("mouseup", disableSwipeListener);
    }
  }
})

这里有一个快速而肮脏的小提琴来帮你入门：http://jsfiddle.net/yve2rLkr/25/