AngularJS實現長按事件監聽(ng-onhold)
阿新 • • 發佈:2019-01-06
用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. 建立指令
4. OK,可以使用了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="">