2
Help us understand the problem. What are the problem?

More than 5 years have passed since last update.

posted at

updated at

【ionic】画面のタップ・ドラッグなどのジェスチャーイベントを取得する

はじめに

ionicで画面のタップやドラッグなどのイベントを取得するには$ionicGestureを利用します。適当なサンプルが見つからなかったので、以下の簡単なサンプルを記述します。

テンプレートの準備

イベントを取得するテンプレートのion-viewタグにidを追記して名前を付けます。

<ion-view view-title="XXXXXX" id="screen_id"> ← idに適当な名称を付加 
  <ion-content>
     ・
     ・
     ・
  </ion-content>
</ion-view>

コントローラ側でイベントを取得するコードを記述

続いて、コントローラで画面イベントを取得するコードを記述します。ここではタップとダブルタップのイベントを取得しています。

  .controller('TestCtrl', function ($ionicGesture) {
    // 取得するイベント
    var events = [{
      event: 'tap',
      text: '--- タップを取得しました ---'
    }, {
      event: 'doubletap',
      text: '--- ダブルタップを取得しました ---'
    }];
    // イベントを取得するビューオブジェクトを取得
    // querySelectorで指定するidの先頭に#を必ず付加すること
    var element = angular.element(document.querySelector("#screen_id"));
    // eventsで定義したジェスジャーイベント発生時のコード
    angular.forEach(events, function (obj) {
      // この例ではeventsで定義したtextをコンソール出力します
      $ionicGesture.on(obj.event, function (event) {
        console.log(event.text);
      }, element);
    });

上記コードでタップとダブルタップが発生した際、コンソールに「・・・を取得しました」とのログが出力されます。
個々のジェスチャーごとに異なる処理を行いたい場合は、$ionicGesture.on("tap",・・・)を複数定義することで対応可能です。

利用可能イベント

$ionicGestureで取得可能なイベントは次のとおりです。

hold, tap, doubletap, drag, dragstart, dragend, dragup, dragdown, 
dragleft, dragright, swipe, swipeup, swipedown, swipeleft, swiperight, 
transform, transformstart, transformend, rotate, pinch, pinchin, pinchout, 
touch, release

参考

検証環境

ionic 1.7.15
cordova 6.2.0

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
2
Help us understand the problem. What are the problem?