web-dev-qa-db-fra.com

ionic2 tap vs clic

Je commence par angular2 et ionic2;

Dans ionic2, j'ai un bouton qui appellera une méthode de mon composant. Comme ça:

<button secondary clear large>
</button>

Devrais-je utiliser (click) - angular2 OU(tap) - ionic2?

Comme ça:

(click)

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

(tap)

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

Il y a une différence? Vous pouvez voir à propos de (tap) dans http://ionicframework.com/docs/v2/components/#gestures

THX.

angularionic2clickionic3tap
17
José Barbosa

Si vous créez des applications mobiles, (tap) pourrait être meilleur. En effet, lorsque vous utilisez (click), l'action est toujours exécutée, même si vous appuyez accidentellement. Le (tap) ne sera pas exécuté si l'utilisateur le conserve plus longtemps. Et si vous souhaitez avoir un bouton sur lequel vous devez cliquer plus longtemps, vous pouvez utiliser le (press).

Notez que dans certaines versions ioniques, l'événement (click) ne s'exécutera pas sur iOS. Par conséquent, utiliser (tap) serait la solution recommandée.

47
Ivar Reukers

Je pense que cela dépend vraiment de la "qualité native" que vous souhaitez donner à l'expérience utilisateur. 

L'événement (tap) provient de la bibliothèque Hammer.js . Si vous regardez le lien, vous verrez les conditions à remplir pour que l'événement tap se déclenche.

La première condition à prendre en compte est l'option time avec une valeur par défaut de 250 ms. Cela signifie que si une presse est supérieure à 250 ms, l'événement ne sera pas déclenché. 

La deuxième condition à prendre en compte est l'option threshold avec une valeur par défaut de 2 (vous ne savez pas de quelle unité il s'agit, éventuellement en pixels). Cela signifie que si la presse a un mouvement supérieur à 2, l'événement ne sera pas déclenché. Par exemple. Si vous déplacez votre doigt de gauche à droite au-dessus de l'écran, puis appuyez sur l'élément pendant ce mouvement, il est possible que l'événement ne se déclenche pas en fonction de la vitesse du mouvement.

Toutefois

L'événement (click) sera toujours déclenché dans les deux cas que je viens de signaler, à condition que lorsque la presse est relâchée, elle se trouve toujours dans l'élément cible. 

Au début, la raison pour laquelle j'ai dit "cela dépend vraiment" est basée sur la façon dont d'autres applications gèrent ces scénarios (chaque application peut potentiellement différer et peut également différer en fonction du résultat du cas d'utilisation). 

Pour autant que je sache, les boutons des applications Android que j'ai vérifiées (ceux avec un résultat visuel, par exemple des messages de navigation ou contextuels) fonctionnent de la même manière que l'événement (click) fourni par Angular. 

Je ne peux pas commenter le fonctionnement des applications IOS en utilisant les mêmes principes que ceux que je n'ai pas testés.

Je ne veux pas dire que, dans tous les cas d'utilisation, (click) devrait être utilisé à la place de (tap), mais essayez de prendre en compte le comportement des autres applications natives et de choisir celle qui convient le mieux.

10
Will.Harris

J'aimerais ajouter que vous pouvez utiliser un événement (tap) pour des éléments tels que button, a, mais pour les éléments non-button l'attribut tappable est utile:

Si vous voulez des clics instantanés sur des éléments autres que des boutons, vous devez ajouter la directive tappable à cet élément, sinon le délai est de 300 ms. Par exemple:

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

J'ai eu des problèmes avec (click) dans iOS, mais sous Android, cela a fonctionné correctement. Dans iOS, lorsque j'ai changé de langue d'application et que, juste après, le lien cliqué, rien n'a été fait. Je pense que cela est lié au bloqueur de clic ionique https://github.com/driftyco/ionic/issues/6996 .

Mais après avoir changé (click) en (tap) après le changement de langue, le lien fonctionne instantanément. J'ai également eu des problèmes lorsque la sélection de la langue ne faisait rien (même après une attente) et l'a également modifiée de (click) à (tap) et cela fonctionne maintenant parfaitement.

1
kettunen

En plus de la question la plus votée, j'aimerais souligner que (tap) traite $event différemment lorsqu'il est utilisé en tant que paramètre . Si je me souviens bien, lors de l'utilisation de (tap), l'attribut target dans $event sera l'élément sur lequel vous avez tapé, pas l'élément avec la liaison d'événement (tap) ..__ Ceci est pertinent si vous avez des éléments enfants dans votre élément avec (tap) qui y est lié.

1
DFSFOT