it-swarm.com.de

ionic2 Tap vs Click

Ich fange mit angle2 und ionic2 an.

In ionic2 habe ich eine Schaltfläche, die eine Methode meiner Komponente aufruft. So was:

<button secondary clear large>
</button>

Soll ich (click) - angle2 ODER(tap) - ionic2 verwenden?

So was:

(click)

<button secondary clear large (click)="pause()">
</button>

(tap)

<button secondary clear large (tap)="pause()">
</button>

Gibt es einen unterschied Sie können ungefähr (tap) in http://ionicframework.com/docs/v2/components/#gestures sehen. _

Vielen Dank.

17
José Barbosa

Wenn Sie mobile Apps erstellen, ist (tap) möglicherweise besser. Dies liegt daran, dass bei der Verwendung von (click) die Aktion immer ausgeführt wird, selbst wenn Sie aus Versehen tippen. Der (tap) wird nicht ausgeführt, wenn der Benutzer es länger hält. Wenn Sie eine Schaltfläche benötigen, die länger gedrückt werden muss, können Sie den (press) verwenden.

Beachten Sie, dass das (click)-Ereignis in einigen ionischen Versionen nicht unter iOS ausgeführt wird. Daher wäre die Verwendung von (tap) die empfohlene Lösung.

47
Ivar Reukers

Ich denke, es hängt wirklich davon ab, wie "nativ wie" die Benutzererfahrung sein soll. 

Das (tap)-Ereignis stammt aus der Hammer.js-Bibliothek . Wenn Sie sich den Link anschauen, werden Sie die Anforderungen sehen, die erfüllt sein müssen, damit das Tap-Ereignis ausgelöst wird.

Die erste Voraussetzung, die Sie beachten sollten, ist die Option time mit einem Standardwert von 250 ms. Dies bedeutet, dass bei einer Presse von mehr als 250 ms das Ereignis nicht ausgelöst wird. 

Die zweite Voraussetzung, die Sie beachten sollten, ist die Option threshold mit einem Standardwert von 2 (nicht sicher, um welche Einheit es sich handelt, möglicherweise Pixel). Dies bedeutet, dass bei einer Bewegung der Presse von mehr als 2 das Ereignis nicht ausgelöst wird. Z.B. Wenn Sie Ihren Finger von links nach rechts über dem Bildschirm bewegen und dann während dieser Bewegung auf das Element drücken, wird das Ereignis möglicherweise nicht ausgelöst, je nach Geschwindigkeit der Bewegung.

Jedoch

Das (click)-Ereignis wird immer noch ausgelöst. In beiden Fällen habe ich darauf hingewiesen, dass sich die Presse nach dem Loslassen der Presse immer noch im Zielelement befindet. 


Der Grund, warum ich gesagt habe, "es kommt wirklich darauf an", hängt davon ab, wie andere Apps mit diesen Szenarien umgehen (jede App kann sich möglicherweise unterscheiden und hängt auch vom Ergebnis des Anwendungsfalls ab). 

Soweit mir bekannt ist, funktionieren die Schaltflächen in den Android-Apps (die mit einem visuellen Ergebnis, z. B. Navigations- oder Popupmeldungen) geprüft wurden, auf dieselbe Weise wie das von Angular bereitgestellte (click)-Ereignis. 

Ich kann nicht kommentieren, wie IOS - Apps nach den gleichen Prinzipien arbeiten, die ich nicht getestet habe.

Ich behaupte nicht, dass in jedem Anwendungsfall (click) anstelle von (tap) verwendet werden sollte, aber ziehen Sie in Betracht, wie sich andere native Apps verhalten und entscheiden Sie, welche davon am besten geeignet ist.

10
Will.Harris

Ich möchte hinzufügen, dass Sie das Ereignis (tippen) für Elemente wie button, a verwenden können, für Nicht-Schaltflächenelemente ist das Attribut tappable jedoch nützlich:

Wenn Sie auf Elemente ohne Schaltfläche sofort klicken möchten, müssen Sie diesem Element eine tappable -Direktive hinzufügen. Andernfalls ist die Verzögerung 300ms. Zum Beispiel:

<div tappable (click)="someHandler()">Click me</div>
3
rtrujillor

Ich hatte Probleme mit (click) in iOS, aber in Android funktionierte es ok. In iOS habe ich die Sprache der Anwendung geändert und direkt hinter dem angeklickten Link nichts getan. Ich denke, das hängt mit Ionic Click Blocker https://github.com/driftyco/ionic/issues/6996 zusammen.

Aber nachdem ich (click) in (tap) geändert habe, funktioniert der Link sofort. Ich hatte auch Probleme, wenn die Sprachauswahl nichts tat (auch nachdem ich einige Zeit gewartet hatte) und das auch von (click) zu (tap) geändert habe und es jetzt perfekt funktioniert.

1
kettunen

Zusätzlich zu der am besten bewerteten Frage möchte ich darauf hinweisen, dass (tap)$event anders verarbeitet, wenn es als Parameter verwendet wird ..__ Wenn ich mich recht erinnere, wird bei Verwendung von (tap) das target-Attribut in $event das Element sein, auf das Sie tatsächlich geklickt haben. nicht das Element mit der (tap)-Ereignisbindung ..__ Dies ist relevant, wenn sich in Ihrem Element untergeordnete Elemente befinden, an die (tap) gebunden ist.

1
DFSFOT