Angular ng-swipe verhindern für Kinder

Question

Wie kann ich verhindern, dass der Standardwert für das untergeordnete Element?

Ich habe Inhaltselement:

<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;"> 

Innerhalb dieses #content ist:

<input type="range"> 

Aber es funktioniert nicht. Ich kann den Bereichsslider nur ein kleines bisschen bewegen und natürlich die Öffnungsnavigation auslösen. Wenn ich ng-Swipe-rechts entfernen & ng-swipe-left es funktioniert ok.

habe ich versucht, diese Lösung: link

Aber es immer noch nicht für Bereichseingang arbeiten ...

Irgendwelche Vorschläge?

Answer 1

Es gibt verschiedene Möglichkeiten, dies zu erreichen.

Beachten Sie, dass das gleiche Swipe-Ereignis sowohl vom Schieberegler als auch vom Inhalt erfasst wird. Da der Schieberegler ein untergeordnetes Objekt ist, wird das Ereignis beim Verschieben zuerst vom Schieberegler empfangen und dann zum Inhalt geleitet. So können Sie die Weitergabe des Ereignisses innerhalb des Handlers für den Swipe des Schiebereglers stoppen.

Oder, wenn Sie ausführlicher darüber sein möchten, fangen Sie das Ereignis in der swipe-left-Handler-Funktion des Inhalts ab, überprüfen Sie sein Ziel und bestätigen Sie, dass es das Schieberelement nicht als Ziel enthält.

Vielleicht erstellen Sie eine Direktive, die so etwas wie 'disableSwipe' genannt wird, die an Berührungsereignisse bindet und deren Weiterleitung an das Bereichselement verhindert.

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); 
    } 
    } 
}) 

Heres eine schnelle und schmutzige Geige zum Einstieg: http://jsfiddle.net/yve2rLkr/25/