# 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 选项卡栏操作