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="">



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值