Verhindern, dass der Finger über den ng-click-Handler ausgelöst wird

Question

Ich arbeite daran, eine iOS-ähnliche Wischgeste zum Löschen auf HTML-Tabellenzeilen zu implementieren. Zum Beispiel werden eine nach links Swipe auf Site11 drehen aus einer Standardreihe:

in eine Lösch-able Reihe:

Ich habe diese Funktionalität mit der ng-swipe-left Richtlinie Arbeits . Allerdings habe ich auch eine ng-click Direktive für jede Zeile, die zu einer anderen Ansicht der Anwendung navigiert. Momentan werden beide Ereignisse ausgelöst, wenn ich in einer Zeile wähle, außer, wenn der Swipe auf dem Text "Site11" endet, im Gegensatz zu irgendwo anders in der Zeile. Zum Beispiel löst diese Geste sowohl die ng-click und die ng-swipe-left Handler:

aber diese Geste wird nur ausgelöst, die ng-swipe-left Handler:

Wie kann ich die ng-click verhindern Handler ausgelöst wird, wenn ein Swipe in der Zeile ausgeführt wird, unabhängig davon, wo der Swipe endet?

Hier ist der Kern meiner HTML-Struktur, die jede Zeile definiert:

<tr ng-repeat="item in items"> 
    <td ng-click="openDetailPane()" 
     ng-swipe-left="$parent.swipeDeleteItemId = item.Id" 
     ng-swipe-right="$parent.swipeDeleteItemId = 'none'"> 
    <div list-item></div> 
    </td> 
    <td> 
    <i class="fa fa-angle-right fa-2x" /> 
     <span>{{item.ChildCount}}</span> 
    </td> 
</tr> 

Die Löschtaste in der list-item Richtlinie definiert ist; es ist nur sichtbar, wenn die ID der swipeDeleteItemId Eigenschaft auf dem Controller passt:

<div class="list-item"> 
    <span>{{item.Name}}</span> 
    <div ng-class="{true: 'is-visible', false: ''}[item.Id === swipeDeleteItemId]"> 
    <div class="delete-item-swipe-button" 
     ng-mousedown="$event.stopPropagation();" 
     ng-click="$event.stopPropagation();">Delete</div> 
    </div> 
</div> 

Ich sollte erwähnen, dass ich nur diese in den Desktop versucht haben Versionen von Chrome und IE11 - Ich gehe davon aus ein Klicken und Ziehen von Eine Maus registriert sich identisch mit einem Swipe auf einem mobilen Gerät.

Answer 1

Endlich konnte ich meine Entwicklungsumgebung einrichten, damit ich meine Anwendung auf einem tatsächlichen mobilen Gerät testen konnte. Ich merke dieses Verhalten nicht mehr - anscheinend funktioniert ein Klicken und Ziehen nicht unbedingt identisch mit einem echten Swipe auf einem mobilen Gerät.

Answer 2

Ich habe das gleiche Problem auch jetzt, und zwar nur auf einem Desktop-Browser. Ich dachte, dass preventDefault() oder stopImmediatePropagation() würde den Trick aber nicht tun. Allerdings habe ich dafür eine Lösung gefunden. Versuchen Sie folgendes:

angular.module('app', []) 
.directive('noSwipeClick', function() { 
    return function(scope, elm) { 
     var el = angular.element(elm); 
     el.bind('click', function(e) { 
      if(scope.swipe.swiping === true) { 
      e.stopPropagation(); 
      e.preventDefault(); 
      } 
     }); 
    }; 
}); 

Und in Ihrem HTML:

<div class="list-item"> 
    <span>{{item.Name}}</span> 
    <div ng-class="{true: 'is-visible', false: ''}[item.Id === swipeDeleteItemId]"> 
    <div no-swipe-click class="delete-item-swipe-button" 
    ng-mousedown="$event.stopPropagation();" 
    ng-click="$event.stopPropagation();">Delete</div> 
    </div> 
</div> 

nicht $scope.swipe.swiping = true in Ihrem Controller zuweisen Vergessen, wenn tatsächlich klauen und es auf false gesetzt, wenn

getan

Answer 3

Ich traf auch diese Situation und ich fand schließlich einen kniffligen Weg, das zu tun.
Die irgendwo erwähnte $event.stopPropagation() funktioniert nur in ngClick.Auch das Schreiben eine benutzerdefinierte Swipe-Richtlinie durch $swipe mit event.stopPropagation() kann ngClick nicht verhindern ... So ...

$swipe Service löst sowohl ‚berühren‘ und ‚Maus‘ Ereignisse standardmäßig. Das Gleiche gilt für die Anweisungen ngSwipeLeft und ngSwipeRight. So
, wenn Sie die Swipe tun, wird es Ereignisse, die von der folgenden Reihenfolge ausgelöst:

1. Berührungsstart
2. touchmove
3. touchEnd
4. mouseDown-
5. mouseUp
6. klicken

Ich testete per Maus ziehen nicht touc h direkt, aber meine App wird auf einem Touchscreen auf dem PC laufen, und der Wisch auf diesem Touchscreen emuliert die Maus ziehen. Also der Ereignistyp $swipe Service 'Ende' Ereignis in meiner App ist 'MouseUp'.
Dann können Sie ein Flag verwenden, um so etwas zu tun:

<div ng-swipe-left="swipeFunc(); swiping=true;" ng-click="swiping ? (swiping = false) : clickFunc();"> 
    ... 
</div> 

oder

<div ng-swipe-left="swipeFunc(); swiping=true;" ng-mouseup="clickFunc();" ng-click="swiping=false;"> 
    ... 
</div>  

mit clickFunc() wie folgt: für mich

$scope.clickFunc = function() { 
    if($scope.swiping) { return; } 
    // do something 
} 

Dies funktioniert. Ich hoffe, dass dies auch für Sie nützlich ist.