web-dev-qa-db-ja.com

ionic2タップvsクリック

私は、angular2とionic2から始めています。

Ionic2には、コンポーネントのメソッドを呼び出すボタンがあります。このような：

<button secondary clear large>
</button>

(click)-angle2[〜＃〜]または[〜＃〜](tap)-ionic2を使用する必要がありますか？

このような：

(click)

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

(tap)

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

違いはありますか？ (tap)については、 http://ionicframework.com/docs/v2/components/#gestures で確認できます。

THX。

angularionic2clickionic3tap
19
José Barbosa

モバイルアプリを作成する場合は、(tap)の方が良いかもしれません。これは、(click)誤ってタップした場合でも、アクションは常に実行されます。 (tap)ユーザーがそれを長期間保持すると実行されません。長時間クリックする必要があるボタンが必要な場合は、(press)。

いくつかのionicバージョンでは(click)イベントはiOSでは実行されません。したがって、(tap)が推奨されるソリューションです。

50
Ivar Reukers

これは、ユーザーエクスペリエンスをどのように「ネイティブライク」にしたいかによって決まると思います。

(tap)イベントは、 Hammer.jsライブラリ からのものです。リンクを見ると、tapイベントが発生するために満たさなければならない要件が表示されます。

最初に注意する必要がある要件は、デフォルト値が250ミリ秒のtimeオプションです。つまり、プレスが250ミリ秒を超えると、イベントは発生しません。

知っておくべき2番目の要件は、デフォルト値が2のthresholdオプションです（これはどのユニットか、おそらくピクセルです）。つまり、プレスの動きが2より大きい場合、イベントは発生しません。例えば。画面上で左から右の方向に指を移動し、この移動中に要素を押すと、移動の速度によってはイベントが発生しない場合があります。

しかしながら

(click)イベントは、プレスがリリースされたときにターゲット要素内にあることを条件に、両方の場合で引き続き発生します。

最初に「本当に依存する」と言った理由は、他のアプリがこれらのシナリオを処理する方法に基づいています（各アプリは潜在的に異なる可能性があり、ユースケースの結果に基づいて異なる可能性もあります）。

私が知っている限り、Androidアプリ（ナビゲーションやポップアップメッセージなどの視覚的な結果を表示するアプリ）のアプリ）のボタンは、(click)イベントと同じように機能します。 Angularによって提供されます。

IOSアプリが私がテストしていないのと同じ原則を使用して動作する方法についてコメントすることはできません。

すべてのユースケースで(click)の代わりに(tap)を使用する必要があることを意味するわけではありませんが、他のネイティブアプリの動作を考慮し、そこから最適なものを決定してください。

11
Will.Harris

button, aのような要素に対して（タップ）イベントを使用できることを追加したいと思いますが、ボタン以外の要素にはtappable属性が便利です：

ボタン以外の要素を瞬時にクリックしたい場合は、その要素にtappableディレクティブを追加する必要があります。そうしないと、300msの遅延が発生します。例えば：

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

IOSで(click)に問題がありましたが、Androidで問題ありませんでした。iOSでアプリケーションの言語を変更し、リンクをクリックした直後は何もしませんでした。関連するIonic click blocker https://github.com/driftyco/ionic/issues/6996 。

しかし、言語変更リンクがすぐに機能した後、(click)を(tap)に変更した後。また、言語選択が（しばらく待っても）何もしなかった場合に問題が発生し、それを(click)から(tap)に変更し、現在は完全に機能するようになりました。

1
kettunen

トップ投票の質問に加えて、(tap)が$eventをパラメーターとして使用した場合に異なる処理をすることを指摘したいと思います。正しく覚えていれば、(tap)を使用するとき、$eventのtarget属性は、(tap)イベントバインディングを持つ要素ではなく、実際にタップした要素になります。これは、(tap)がバインドされた要素内に子要素がある場合に関連します。

1
DFSFOT