1. 程式人生 > >AngularJS實現長按事件監聽(ng-onhold)

AngularJS實現長按事件監聽(ng-onhold)

用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']);
	}
}]);
4. OK,可以使用了
<div ng-onhold="">