这两天学习了AngularJS手势事件感觉这个地方知识点挺多的，而且很重要，所以，今天添加一点小笔记。
长按 : on-hold
在屏幕同一位置按住超过500ms，将触发on-hold事件：
你可以在任何元素上使用这个指令挂接监听函数：
<any on-hold=“…”>…</any>
示例代码：
<body ng-controller=”ezCtrl”> <ion-header-bar class=”bar-positive” on-hold=”show_delete();”> <h1 class=”title”>on-hold</h1> </ion-header-bar> <ion-content> <ion-list ng-repeat=”item in items”> <ion-item> {{item}} <ion-delete-button class=”ion-minus-circled”></ion-delete-button> <ion-reorder-button class=”ion-navicon”></ion-reorder-button> </ion-item> </ion-list> </ion-content> <ion-footer-bar class=”bar-positive”></ion-footer-bar> </body>
js：
angular.module(“ezApp”,[“ionic”]) .controller(“ezCtrl”,function($scope, $ionicListDelegate) { $scope.items=[“China”,”Japan”,”India”,”Russian”]; $scope.show_delete = function(){ $ionicListDelegate.showDelete(true); }; });
敲击 : on-tap
在屏幕上快速点击一次（停留时间不超过250ms），将触发on-tap事件：
可以在任何元素上使用这个指令挂接事件监听函数：
<any on-tap=“…”>…</any>
示例代码：
<head> <meta name=”viewport” content=”initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height”> <script src=https://www.jb51.net/”ionic.bundle.min.js”></script> <link rel=”stylesheet” type=”text/css” href=https://www.jb51.net/”ionic.min.css”> </head> <body ng-controller=”ezCtrl”> <ion-header-bar class=”bar-positive”> <h1 class=”title”>on-tap</h1> </ion-header-bar> <ion-content> <ion-list ng-repeat=”item in items”> <ion-item on-tap=”show(item);”> {{item}} <ion-reorder-button class=”ion-navicon”></ion-reorder-button> </ion-item> </ion-list> </ion-content> </body>
js：
angular.module(“ezApp”,[“ionic”]) .controller(“ezCtrl”,function($scope, $ionicPopup) { $scope.items=[“England”,”Japan”,”India”,”Russian”]; $scope.show = function(item){ $ionicPopup.alert({ title : “警告!”, template : “为什么要敲 “+ item + “?” }); }; });
双击 : on-double-tap
在屏幕上快速敲击两次，将触发on-double-tap事件：
可以在任何元素上使用这个指令挂接事件监听函数：
<any on-double-tap=“…”>…</any>
示例代码：
<body ng-controller=”ezCtrl”> <ion-header-bar class=”bar-positive” on-double-tap=”title='I am double tapped!'”> <h1 class=”title”>{{title}}</h1> </ion-header-bar> <ion-content> <p ng-include=”‘txt/xiyouji.txt'”></p> </ion-content> </body>
js：
angular.module(“ezApp”,[“ionic”]) .controller(“ezCtrl”,function($scope) { $scope.title = “on-double-tap”; });
按下/松开 on-touch/on-release
在屏幕上按下手指或鼠标键时，会立即触发on-touch事件；当手指抬起或鼠标键松开时， 会立即触发on-release事件。
可以在任何元素上挂接响应的事件监听函数：
<any on-touch=“…” on-release=“…”>…</any>
示例代码：
<body ng-controller=”ezCtrl”> <ion-header-bar class=”bar-positive” ng-class=”[style]” on-touch=”style='bar-assertive'” on-release=”style='bar-positive'”> <h1 class=”title”>on-touche/on-release</h1> </ion-header-bar> <ion-content> <img src=https://www.jb51.net/”img/0021.png”> </ion-content> </body>
js：
angular.module(“ezApp”,[“ionic”]) .controller(“ezCtrl”,function($scope) { });
拖拽 : on-drag
在屏幕上按住并移动时，触发on-drag拖拽事件：
根据运动方向的不同，可以细分为以下几种事件：
on-drag – 向所有方向拖动时都触发此事件
on-drag-up – 向上拖动时触发此事件
on-drag-down – 向下拖动时触发此事件
on-drag-left – 向左拖动时触发此事件
on-drag-right – 向右拖动时触发此事件
可以在任意元素上使用这些指令挂接对应的事件监听函数：
<any on-drag=“…”>…</any>
示例代码：
<body ng-controller=”ezCtrl”> <ion-header-bar class=”bar-positive”> <h1 class=”title”>on-drag</h1> </ion-header-bar> <div class=”scroll-content has-header padding”> <img src=https://www.jb51.net/”img/baymax.png” on-touch=”onTouch($event)” on-drag=”onDrag($event);”> </div> </body>
js：