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']);}}]);
<div ng-onhold="">
阅读全文
0 0
- AngularJS实现长按事件监听(ng-onhold)
- RecyclerView实现点击和长按事件的监听方法
- AngularJs --ng-click事件
- ExpandableListView长按监听实现
- AngularJs ng-change事件/指令
- angularJS添加事件监听
- angularJs监听ng-repeat渲染完成
- AngularJS ng-model 验证及监听
- 借鉴一个实现RecyclerView的item的短按以及长按监听事件
- Android开发之PullToRefresh的Click点击事件的监听实现长按删除Item
- ListView长按事件和点击事件监听
- ListView的点击事件、长按事件监听
- angularjs 事件广播(分发)与事件监听
- UGUI - 长按事件实现
- UGUI - 长按事件实现
- React实现Angularjs ng-show、ng-if和ng-hide
- $watch--angularJs的监听事件
- angularjs ng-click 阻止事件冒泡
- AJAX的使用及规范格式
- MySQL索引总结
- 自定义View之线性百分比进度条
- 【剑指offer】二叉搜索树转换为有序双向链表。要求不创建新节点。只改变指向。
- 用Python实现简单的服务器
- AngularJS实现长按事件监听(ng-onhold)
- 结构体与类(静态类、抽象类)学习
- Java反射机制
- Android.mk添加本地程序和库的经常使用模版
- Recurrent neural network based language model翻译(部分)
- 邮件营销中如何引导用户注册才能有效预防退订?
- IsIconic()和OnPaint()函数
- 【English】Learning English
- Android零基础入门第45节:GridView简单使用