# 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 類似,都有四個方向上單獨的事件。
```
<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
一個angular服務展示ionicionic.EventController手勢。
### 方法
```
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元素。
- ionic 入門
- ionic 簡介
- ionic 安裝
- ionic 創建 APP
- ionic CSS
- ionic 頭部與底部
- ionic 按鈕
- ionic 列表
- ionic 卡片
- ionic 表單和輸入框
- ionic Toggle(切換開關)
- ionic 單選框
- ionic Range
- ionic select
- ionic tab(選項卡)
- ionic 網格(Grid)
- ionic 顏色
- ionic icon(圖標)
- ionic JavaScript
- ionic 上拉菜單(ActionSheet)
- ionic 背景層
- ionic 下拉刷新
- ionic 復選框
- ionic 單選框操作
- ionic 切換開關操作
- ionic 手勢事件
- ionic 頭部和底部
- ionic 列表操作
- ionic 加載動作
- ionic 模型
- ionic 導航
- ionic 平臺
- ionic 浮動框
- ionic 對話框
- ionic 滾動條
- ionic 側欄菜單
- ionic 滑動框
- ionic 加載動畫
- ionic 選項卡欄操作