AngularJS实现长按事件监听(ng-onhold)

来源:互联网 发布:云计算安全问题实例 编辑:程序博客网 时间:2024/06/06 07:39

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



原创粉丝点击