用AngularJS做H5手机APP开发的时候碰到的问题,需要实现长按监听的效果。
网上大都是由框架ionic来实现的,因为我的项目没有用到,不想加入额外的框架了,于是就想自己实现。
实现步骤如下:
1. 引入angularjs自带的js附加包:
<script type="text/javascript" src="jslib/angular/angular-touch.min.js"></script>
2. 模块中引入ngTouch
var app = angular.module("app", [ "ngTouch" ]);
3. 创建指令
app.directive("ngOnhold", ["$swipe", "$parse", function($swipe, $parse){
//长按触发事件需要的时间
var ON_HOLD_TIMEMS = 500;
return function(scope, element, attr) {
var onholdHandler = $parse(attr["ngOnhold"]);
var run;
$swipe.bind(element, {
'start': function(coords, event) {
run = setTimeout(function(){
scope.$apply(function() {
element.triggerHandler("onhold");
onholdHandler(scope, {$event: event});
});
}, ON_HOLD_TIMEMS);
},
'cancel': function(event) {
if(run)clearTimeout(run);
},
'move' : function(event){
if(run)clearTimeout(run);
},
'end': function(coords, event) {
if(run)clearTimeout(run);
}
}, ['touch', 'mouse']);
}
}]);
<div ng-onhold="">