AngularJS ionic手势事件的使用总结

前端之家收集整理的这篇文章主要介绍了AngularJS ionic手势事件的使用总结前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

这两天学习了AngularJS手势事件感觉这个地方知识点挺多的,而且很重要,所以,今天添加一点小笔记。

长按 : on-hold

在屏幕同一位置按住超过500ms,将触发on-hold事件:

你可以在任何元素上使用这个指令挂接监听函数

示例代码

on-hold

{{item}}

js:

敲击 : on-tap

在屏幕上快速点击一次(停留时间不超过250ms),将触发on-tap事件:

可以在任何元素上使用这个指令挂接事件监听函数

示例代码

on-tap

{{item}}

js:

双击 : on-double-tap

在屏幕上快速敲击两次,将触发on-double-tap事件:

可以在任何元素上使用这个指令挂接事件监听函数

示例代码

{{title}}

js:

按下/松开 on-touch/on-release

在屏幕上按下手指或鼠标键时,会立即触发on-touch事件;当手指抬起或鼠标键松开时, 会立即触发on-release事件。

可以在任何元素上挂接响应的事件监听函数

示例代码

on-touche/on-release

js:

拖拽 : on-drag

在屏幕上按住并移动时,触发on-drag拖拽事件:

根据运动方向的不同,可以细分为以下几种事件:

  • on-drag – 向所有方向拖动时都触发此事件
  • on-drag-up – 向上拖动时触发此事件
  • on-drag-down – 向下拖动时触发此事件
  • on-drag-left – 向左拖动时触发此事件
  • on-drag-right – 向右拖动时触发此事件

可以在任意元素上使用这些指令挂接对应的事件监听函数

示例代码

on-drag

js:

划动 : on-swipe

在屏幕上按住并快速拖动时,将触发on-swipe划动事件:

根据划动方向的不同,可细分为以下指令:

  • on-swipe – 向任何方向的划动都触发事件
  • on-swipe-up – 向上划动时触发事件
  • on-swipe-down – 向下划动时触发事件
  • on-swipe-left – 向左划动时触发事件
  • on-swipe-right – 向右划动时触发事件

可以在任何元素上使用这些指令挂接事件监听函数

示例代码

按住鼠标快速划!

js:

脚本接口 : $ionicGesture

除了使用之前介绍的特定指令实现手势事件的监听,也可以使用$ionicGesture服务 注册/解除手势事件监听:

注册手势事件监听函数

参数eventType是支持的事件类型,参看下面介绍;参数callback指定监听函数; 参数$element是要绑定事件的jqLite元素。

on()方法返回的是一个ionic.gesture对象,可供解除监听用。

函数

参数gesture是on()方法返回的结果对象,参数callback是要移除的监听函数

$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

示例代码

$ionicGesture

js:

注册的!” }) },angular.element(el)); });

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

猜你在找的JavaScript相关文章