ionic ジェスチャーイベント

イベント 説明 使用法 例
on-hold 長押しの時間は500ミリ秒です。 
<button 
    on-hold="onHold()" 
    class="button">
    Test
    </button>
試してみる »
on-tap これはジェスチャーのタップイベントです。長押し時間が250ミリ秒を超えると、タップではなくなります。 
<button 
    on-tap="onTap()" 
    class="button">
    Test
    </button>
 試してみる »
on-double-tap 画面をダブルタップするイベント 
<button 
    on-double-tap="onDoubleTap()" 
    class="button">
    Test
    </button>
 試してみる »
on-touch これは on-tap とは異なります。これは即座に実行され、ユーザーがクリックした瞬間に実行されます。touchend/mouseup を待つ必要はありません。 
    <button on-touch="onTouch()" 
    class="button">
    Test
    </button>
 試してみる »
on-release ユーザーがタッチイベントを終了したときにトリガーされます。 
<button 
    on-release="onRelease()" 
    class="button">
    Test
</button>
 試してみる »
on-drag これはPCのドラッグに似ています。オブジェクトをクリックし続けて手が動き始めると、on-drag がトリガーされます。 
<button 
    on-drag="onDrag()" 
    class="button">
    Test
</button>
 試してみる »
on-drag-up 上にドラッグします。 
<button 
    on-drag-up="onDragUp()" 
    class="button">
    Test
</button>
試してみる »
on-drag-right 右にドラッグします。 
<button 
    on-drag-right="onDragRight()" 
    class="button">
    Test
</button>
 試してみる »
on-drag-down 下にドラッグします。 
<button 
    on-drag-down="onDragDown()" 
    class="button">
    Test
</button>
 試してみる »
on-drag-left 左にドラッグします。 
<button 
    on-drag-left="onDragLeft()" 
    class="button">
    Test
</button>
 試してみる »
on-swipe 指のスワイプ効果で、任意の方向にできます。また on-drag と同様に、4つの方向それぞれに個別のイベントがあります。 
<button 
    on-swipe="onSwipe()" 
    class="button">
    Test
</button>
 試してみる »
on-swipe-up 上方向の指のスワイプ効果。 
<button 
    on-swipe-up="onSwipeUp()" 
    class="button">
    Test
</button>
 試してみる »
on-swipe-right 右方向の指のスワイプ効果。 
<button 
    on-swipe-right="onSwipeRight()" 
    class="button">
    Test
</button>
 試してみる »
on-swipe-down 下方向の指のスワイプ効果。 
<button
    on-swipe-down="onSwipeDown()"
    class="button">
    Test
</button>
 試してみる »
on-swipe-left 左方向の指のスワイプ効果。 
<button 
    on-swipe-left="onSwipeLeft()"
    class="button">
    Test
</button>
 試してみる »

$ionicGesture

ionicionic.EventController ジェスチャーを表示する Angular サービス。

メソッド

on(eventType, callback, $element)

要素にイベントリスナーを追加します。

パラメータ 型 詳細
eventType string

リッスンするジェスチャーイベント。
callback function(e)

ジェスチャーイベントが発生したときにトリガーされるイベント。
$element element

angular 要素がリッスンするイベント。
options object

オブジェクト。

 
off(eventType, callback, $element)

要素からジェスチャーイベントリスナーを削除します。

パラメータ 型 詳細
eventType string

リッスンを解除するジェスチャーイベント。
callback function(e)

リスナーを削除します。
$element element

イベントがリッスンされていた angular 要素。
その他の拡張