第一次写博客不知道写什么,写个前段时间解决的一个问题作为第一篇文吧(哈哈)。
做项目的时候,经常碰到网不好请求慢的时候用户就会多次进行点击,导致提交多次请求,为了阻止这种情况,自己写了一个点击组件,替换掉原本使用的ng-click。刚开始的时候也是去网上找解决方法,但是网上的多是阻止双击的,并不能满足我需要的效果,后来突然发现$http有个pendingRequests属性——当前正在等待的请求的配置对象数组,正好可以用来判断当前请求是否结束了。
结合用$timeout来阻止双击事件的写法,最后写法如下:
.directive('singleClick',function ($parse, $rootScope, $timeout, $http) {
var clickable = true;
var directiveName = 'singleClick';
return {
restrict: 'A',
link: function(scope, iElement, attr) {
var fn = $parse(attr[directiveName], null, true);
iElement.on('click', function(event) {
if (!clickable) {
event.preventDefault();//阻止默认事件
event.stopImmediatePropagation();//阻止所有事件传播
return
}