鄙人来本公司前未用过ionic框架，但由于ionic是基于angularjs封装的，正好我用过angularjs，很荣幸的面试就过了，然后通过该网站http://www.ionic.wang（后面简称网站i）边学ionic边做项目。
ionic刚踩过的坑--$ionicGesture！现总结下$ionicGesture,希望对用到该框架的童鞋有所帮助！
网站i对$ionicGesture的介绍如下：
在一个元素上添加一个事件**。
$ionicGesture.on(eventType, callback, $element)
在一个元素上移除一个手势事件**。
$ionicGesture.off(eventType, callback, $element)
参数介绍：
参数 类型 详情eventType string 监听的手势事件。callback function(e) 当手势事件发生时触发的事件。$element element angular元素监听的事件
网站i这对$ionicGesture的介绍把我坑的不要不要的，.on()方法没错，.off()参数不对啊！
这里的off()方法我按网站i的介绍做完，弄了好久都不行，后来按住alt点击$ionicGesture.off进去看源码是这样的才知道网站i介绍该方法错了。
现整理汇总如下：
$ionicGesture服务--注册/解除手势事件监听
注册手势事件监听函数
$ionicGesture.on(eventType, callback, $element)
on()方法返回的是一个ionic.gesture对象，可供解除监听用。
参数介绍：
- 参数eventType是支持的事件类型；
- 参数callback指定监听函数；
- 参数$element是要绑定事件的jqLite元素；
- 参数options是on方法返回对象的一个子对象options。
解除手势事件监听函数
$ionicGesture.off(gesture,eventType,callback)
参数介绍：
- 参数gesture是on()方法返回的结果对象；
- 参数eventType是支持的事件类型；
- 参数callback是要移除的监听函数。
注意：canllback默认参数event，后面代码有提到。
$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
举个例子：
结构层：
<div> <p>注册、解除手势事件都是按顺序，先button1在button2</p> <p>点击bind一次button注册一次事件</p> <button ng-click="add()">bind</button> <p>点击unbind一次button解除一次事件</p> <button ng-click="delete()">unbind</button><br><br> <button id="idCardNick">idCardNick button1</button><br><br> <button id="licenseNick">licenseNick button2</button> </div>
只为实现简单的效果，样式比较呵呵！
效果:bind、unbind按钮注册、解除手势事件，都是按顺序，先button1在button2。
行为层：
写在末尾的公用方法
$scope.add=function(){ if($scope.data.length<2){$scope.data.push('nick');} }; $scope.delete=function(){ $scope.data.pop(); }; .on()和.off()的监听函数
function clickFn(ev,idx){ //这里默认的arguments是event 自定义的参数idx无法获取？？ console.log(arguments); console.log(idx);//undefined console.log($scope.idx);//这样可以获取idx对象 };
这里要注意的就是监听函数的默认参数event，我开始天真的写成下面这样
function clickFn(idx){ …… } 这样写坑死我啦，后来打桩console.log(idx);结果打印出来是event，我勒个去！
监听data.length动态添加删除click事件
$scope.data=[]; var clickGesture0,clickGesture1,unbindWatch;
unbindWatch=$scope.$watch('data.length',function(newval,oldval){ if(newval==0){ if(clickGesture0){OffclickFn(clickGesture0);} if(clickGesture1){OffclickFn(clickGesture1);} }else if(newval==1){ clickGesture0=AddclickFn('#idCardNick',0); if(clickGesture1){OffclickFn(clickGesture1);} }else if(newval==2){ clickGesture1=AddclickFn('#licenseNick',1); }else{//不用时为了性能销毁watch unbindWatch(); } console.log(clickGesture0); });
添加监听手势函数AddclickFn这里有2中写法
写法一：
function AddclickFn(selector,idx){ return $ionicGesture.on('click',function(){ console.log(arguments); console.log(idx);//这样可以获取idx },angular.element(document.querySelector(selector))); };这样写$ionicGesture.on()的监听函数callback就可以获取参数idx，但是这样写$ionicGesture.off()就不能解除callback监听函数了，所以我写成了第二种写法。
写法二：
function AddclickFn(selector,idx){ return $ionicGesture.on('click',clickFn,angular.element(document.querySelector(selector)),$scope.idx={idx:idx}); }; 将idx存入options.idx在作为对象存入$scope.idx，这样clickFn就可以使用$scope.idx.idx，即参数idx的值。
这里虽然写法二能实现效果，但我总感觉这样写不好，希望有大牛能给点建议，给我留言或者qq联系，多谢！
移除手势监听函数：
function OffclickFn(clickGesture){ $ionicGesture.off(clickGesture,'click',clickFn); };我把需要注意的地方都加注释了，上完整代码：
<!DOCTYPE html><html ng-app="nickApp"><head> <meta charset="utf-8" name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height"> <script src='/images/loading.gif' data-original="lib/ionic/js/ionic.bundle.min.js"></script> <link rel="stylesheet" type="text/css" href="lib/ionic/css/ionic.min.css"></head><body ng-controller="nickCtrl"> <div> <p>注册、解除手势事件都是按顺序，先button1在button2</p> <p>点击bind一次button注册一次事件</p> <button ng-click="add()">bind</button> <p>点击unbind一次button解除一次事件</p> <button ng-click="delete()">unbind</button><br><br> <button id="idCardNick">idCardNick button1</button><br><br> <button id="licenseNick">licenseNick button2</button> </div> <script>/* http://www.ionic.wang/js_doc-index-id-58.htmlon(eventType, callback, $element)off(eventType, callback, $element)参数 类型 详情eventType string 监听的手势事件。callback function(e) 当手势事件发生时触发的事件。$element element angular元素监听的事件。*//*//完整汇总：$ionicGesture服务--注册/解除手势事件监听：on(eventType,callback,$element,options) - 注册手势事件监听函数参数eventType是支持的事件类型；参数callback指定监听函数；参数$element是要绑定事件的jqLite元素。参数options是on方法返回对象的一个子对象optionson()方法返回的是一个ionic.gesture对象，可供解除监听用。off(gesture,eventType,callback) - 解除手势事件监听函数参数gesture是on()方法返回的结果对象，参数eventType是支持的事件类型参数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*/ angular.module('nickApp',['ionic']) .controller('nickCtrl', ['$scope','$ionicGesture', function ($scope,$ionicGesture){ $scope.data=[]; var clickGesture0,clickGesture1,unbindWatch; //监听data.length动态添加删除click事件 unbindWatch=$scope.$watch('data.length',function(newval,oldval){ if(newval==0){ if(clickGesture0){OffclickFn(clickGesture0);} if(clickGesture1){OffclickFn(clickGesture1);} }else if(newval==1){ clickGesture0=AddclickFn('#idCardNick',0); if(clickGesture1){OffclickFn(clickGesture1);} }else if(newval==2){ clickGesture1=AddclickFn('#licenseNick',1); }else{//不用时为了性能销毁watch unbindWatch(); } console.log(clickGesture0); }); /*function AddclickFn(selector,idx){ return $ionicGesture.on('click',function(){ console.log(arguments); console.log(idx);//这样可以获取idx },angular.element(document.querySelector(selector))); };*/ function AddclickFn(selector,idx){//将idx存入options.idx在作为对象存入$scope.idx return $ionicGesture.on('click',clickFn,angular.element(document.querySelector(selector)),$scope.idx={idx:idx}); }; /* 按住alt点击$ionicGesture.off进去看源码是这样的 才知道ionic.wang这网站介绍gusture方法错了 off: function(gesture, eventType, cb) { return window.ionic.offGesture(gesture, eventType, cb); }*/ $scope.add=function(){ if($scope.data.length<2){$scope.data.push('nick');} }; $scope.delete=function(){ $scope.data.pop(); }; function clickFn(ev,idx){ //这里默认的arguments是event 自定义的参数idx无法获取？？ console.log(arguments); console.log(idx);//undefined console.log($scope.idx);//这样可以获取idx对象 }; function OffclickFn(clickGesture){ $ionicGesture.off(clickGesture,'click',clickFn); }; }]); </script></body></html>View Code
再唠叨下：上面写法二我总感觉不好，希望有大牛能给点建议，给我留言或者qq联系，多谢！
原标题：ionic之$ionicGesture手势（大坑）
关键词：
我知道了 