子供の角度スワイプ防止

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

これを実現する方法はいくつかあります。

同じスワイプイベントがスライダとコンテンツの両方で捕捉されていることに注意してください。また、スライダはコンテンツの子であるため、スライダをスライドさせると、まずスライダでイベントが受信され、コンテンツにバブリングされます。したがって、スライダのスワイプのハンドラ内でイベントの伝播を停止することができます。

さらに詳しく説明したい場合は、コンテンツのスワイプ左のハンドラ関数でイベントをキャッチし、ターゲットを確認して、そのスライダ要素がターゲットとして含まれていないことを確認します。

「disableSwipe」のようなディレクティブを作成して、touchイベントにバインドし、その伝搬をrange要素に禁止することがあります。

相続人

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/