angular - ionic2 tap vs click
ionic3 (6)
Además de la pregunta más votada, me gustaría señalar que (tap)
procesa $event
diferentemente cuando se usa como parámetro. Si recuerdo correctamente, cuando use (tap)
el atributo de target
en $event
será el elemento que realmente tocó, no el elemento que tiene el enlace de evento (tap)
. Esto sería relevante si tiene elementos secundarios dentro de su elemento con (tap)
vinculado a él.
Estoy empezando con angular2 y ionic2;
En ionic2, tengo un botón que llamará a un método de mi componente. Me gusta esto:
<button secondary clear large>
</button>
¿Debo usar (click)
- angular2 O (tap)
- ionic2?
Me gusta esto:
(click)
<button secondary clear large (click)="pause()">
</button>
(tap)
<button secondary clear large (tap)="pause()">
</button>
Hay alguna diferencia? Puede ver acerca de (tap)
en http://ionicframework.com/docs/v2/components/#gestures
Gracias.
Creo que realmente depende de qué tan "nativo" quieres que sea la experiencia del usuario.
El evento (tap)
proviene de la biblioteca Hammer.js . Si observa el enlace, verá los requisitos que deben cumplirse para que se active el evento tap.
El primer requisito a tener en cuenta es la opción de tiempo con un valor predeterminado de 250 ms. Esto significa que si una presión supera los 250 ms, el evento no se activará.
El segundo requisito a tener en cuenta es la opción de umbral con un valor predeterminado de 2 (no estoy seguro de qué unidad es, posiblemente, los píxeles). Esto significa que si la prensa tiene un movimiento mayor que 2, el evento no se disparará. Por ejemplo, mover el dedo en la dirección de izquierda a derecha sobre la pantalla y luego presionar el elemento durante este movimiento, es posible que el evento no se dispare dependiendo de la velocidad del movimiento.
sin embargo
El evento (click)
todavía se activará en ambos casos, solo lo señalé, siempre que cuando se suelte la prensa aún esté dentro del elemento objetivo.
Al principio, la razón por la que dije que "realmente depende" se basa en cómo otras aplicaciones manejan estos escenarios (cada aplicación podría diferir y también podría diferir según el resultado del caso de uso).
Por lo que sé, los botones en las aplicaciones de Android que he marcado (las que tienen un resultado visual, por ejemplo, mensajes de navegación o ventanas emergentes) funcionan de la misma manera que el evento (click)
proporcionado por Angular.
No puedo comentar sobre cómo funcionan las aplicaciones de iOS usando los mismos principios que no he probado.
No estoy dando a entender que en todos los casos de uso (click)
debe utilizar en lugar de (tap)
sino que hay que considerar cómo se comportan otras aplicaciones nativas y decidir a partir de ahí cuál es la más adecuada.
Me gustaría agregar que puede usar (tocar) evento para elementos como button, a
, pero para los elementos que no son botones, el atributo tappable
es útil:
Si desea clics instantáneos en elementos que no son botones, debe agregar tappable
directiva que se pueda tappable
a ese elemento, de lo contrario, tiene un retraso de 300 ms. Por ejemplo:
<div tappable (click)="someHandler()">Click me</div>
Si haces aplicaciones móviles, (tap)
podría ser mejor. Esto se debe a que al usar (click)
la acción siempre se ejecuta, incluso cuando se toca accidentalmente. El (tap)
no se ejecutará si el usuario lo mantiene durante un período más largo. Y si desea tener un botón que necesita hacer clic durante un período de tiempo más prolongado, puede usar (press)
.
Tenga en cuenta que en algunas versiones iónicas, el evento (click)
no se ejecutará en iOS. Por lo tanto, usar (tap)
sería la solución recomendada.
Tuve problemas con (click)
en iOS pero en Android funcionó bien. En iOS, cuando cambié el idioma de la aplicación y justo después de hacer clic en el enlace, no hizo nada. Creo que eso está relacionado con el bloqueador de clics iónico https://github.com/driftyco/ionic/issues/6996 .
Pero después de cambiar (click)
a (tap)
después de que el enlace de cambio de idioma funcione al instante. También tuve problemas cuando la selección de idioma no hizo nada (incluso después de esperar un tiempo) y cambié eso también de (click)
a (tap)
y ahora funciona perfectamente.
iOS tiene problemas con el evento de clic en general (evento en la web, si está realizando pruebas en un dispositivo móvil sensible en la consola del navegador).
Entonces, lo que generalmente sucede es que el usuario tiene que hacer clic dos veces para realizar acciones.
Descubrí que esto se debe a que si está haciendo desarrollo móvil (consola chrome o incluso emulador de iOS) tendrá que usar el evento (toque).
El problema era difícil de conocer debido a su comportamiento irregular, cuando está usando (clic) en
algo que normalmente no se puede hacer clic, se produce este problema.
Entonces, si usa (toca) en dichos elementos y (hace clic en), todo debería funcionar bien.
Mi sugerencia es utilizar ambos para mejor!