web-dev-qa-db-ja.com

ダブルタップ/ダブルクリックAngular2＆ionic

私は多くのフォーラムや質問で検索していますが、Angular/ionic 2でダブルクリックまたはダブルタップする方法を尋ねる人はいません。

ionic v1では、on-double-tap（ http://ionicframework.com/docs/api/directive/onDoubleTap/ を参照）

ionic 2/angular 2？

多分HammerJSを通して？

どうもありがとうございました ！ルイス:)

angularionic2directiveangular2-directivesdouble-click
8
luiswill

したがって、1〜2時間後には明らかでしたが、Ionicを使用してダブルクリックイベントをキャッチする必要はありませんが、純粋なJavaScriptを使用する場合：dblclick()

したがって、Angular 2では、次のようになります：(dblclick)="myFunction()" 以上です！

ここでは、 JavaScript の他のイベントを見つけます。

12
luiswill

htmlファイル

<button (tap)="tapEvent()">Tap Me!</button>

tsファイル

let count : number = 0;
tapEvent(){
this.count++;
setTimeout(() => {
  if (this.count == 1) {
    this.count = 0;
    alert('Single Tap');
  }if(this.count > 1){
    this.count = 0;
    alert('Double Tap');
  }
}, 250);

}

2
Toprak Erzurumluoglu

単純なクリックとダブルクリックに同じボタンを使用するには、setTimeout関数が役立ちます。矢印の実装で使用する必要があります=>。

html template

<button (click)="simpleClickFunction()" (dblclick)="doubleClickFunction()">click me!</button>

Component

simpleClickFunction(): void{
    this.timer = 0;
    this.preventSimpleClick = false;
    let delay = 200;

    this.timer = setTimeout(() => {
      if(!this.preventSimpleClick){
        //whatever you want with simple click go here
        console.log("simple click");
      }
    }, delay);

  }

  doubleClickFunction(): void{
    this.preventSimpleClick = true;
    clearTimeout(this.timer);
    //whatever you want with double click go here
    console.log("double click");
  }
2
edkeveked

Ionic 2には、HTMLからアクセスできる基本的なジェスチャーがあります。 iOSとAndroidで動作するはずです。 ドキュメントはこちら です。

彼らが提供するソースコード ここにあります 。

0
Borja Perez