记一次与a标签相遇的小事

　　最近做的一个项目，按钮使用的是a标签做的，样子还不错。不过正是这个a标签把我坑死了，有一个场景是点击a标签去调后台服务，为了防止用户频繁点击按钮提交，在去请求后台服务的时候肯定要先把按钮的事件给禁止掉，后台服务回来之后，要把按钮变成可以点击的状态。button有一个disabled属性可以禁止按钮的点击，但是a标签并没有这个属性，disabled对它没有用。当时想了许久都不知道怎么去处理这个东西，想过把a标签换成button，但是一想到要找UI修改demo就不去了，顺便增加一下自己这方面的知识。下面写一下LZ面对这一小问题的尴尬经历。

　　找了许久的资料，发现都没有很好的方法符合自己的要求，想到one、off、remove，但是然并卵，去掉之后事件就回复不来了，真是尴尬。原本自信满满的一下子觉的真艰难，后面又去看了看jquery的api有没有符合的，发现也是木有。LZ暂时就在一些只要点击一次的事件使用了one或remove，但是转念一想不对呀，要是服务报错了，用户就点击不了，这要把用户坑了，把用户坑了就是把自己坑了。这不相当给自己挖一个坑，自己跳下去呀，LZ肯定不能干着事情呀。LZ马上觉的还是去一趟WC比较靠谱，放松放松一下脑子。

　　回来之后，果然脑子好使了，联想到自己处理过多次弹框的问题（有多次相同的弹框，场景要求只能弹一次），发现与这个还有点类似，与马上动手搞。先得有一个a标签吧！

　　<a class="btn">我就要点多次，你能咋得</a>

　　要有事件吧！（LZ内心暗骂，擦，不要怂，就是干！）

var isOnclick=true;//默认可以点击　
　　$(".btn").on(click,function(){
        if(isOnclick){
            isOnclick=false;//不能点击了
            ajax{//不管成功与否都把isOnclick设置为true,即可点击的状态
　　　　        。。。。。。。。。。。
　　　　        isOnclick=true;
　　        }
    )
}

　上面就是一个简单的过程，不过实现了自己需要的东西。主要就是设置一个变量来判断a标签目前的状态，说一下主要的流程：

　　1、首先定义一个变量isOnclick，默认为true.即一进去页面默认a标签为可点击状态。

　　2、当用户点击之，立即把isOnclick设置为false,这样用户多次点击都不会重复执行。

　　3、当后台服务完成，把isOnclick设置为true,这样a标签又可以点击了。

　完成上面的流程后，a标签肯定变成这样了。哈哈，此时LZ的心情！！！

<a class="btn">大哥，我错了。给点饭吃吧</a>

　　不过本着精益求精的原则，LZ突然想不能点击的时候是不是得有点提示呀，不然用户不知道，一直在那狂点，没有撒作用。不得投诉LZ的代码。肯定会一边点着鼠标，一边把口中暗骂，那个SB写的代码，完全没有用嘛。此时LZ肯定会打了个喷嚏，是谁在想我？？？想想就觉的全身发抖。以上内容纯属LZ瞎逼逼的。吼吼吼，回到问题中来，不过为了让用户体验更好，一般都会在按钮点击不了之后把按钮置灰，这也相当与提醒用户此时按钮是不可点击的。想到着LZ马上找到UI，给我做一个置灰的按钮呗。UI肯定也烦了，一下子这个，一下子那个。这么简单的事情都不会（其实这也是LZ瞎想的，哈哈，想象力已经丰富到一个境界了）。其实也就设置了一个背景颜色，做为一个后端狗，LZ这点还是会的，写一个bcakgruond-color嘛，lz数了数，加上-一共16个字母写错2个，正确率快到90%了呢。哈哈，正确的写法是btn-color{ background-color: gray;}。现在的a标签已经变为这样了。

<a class="btn">干嘛不给人家加一个好看的颜色，呜呜</a>

　　一想到a有样式了,LZ又不爽了，我还是把你干趴下，不然人生艰难。马上又写了一段吊炸天的代码（感觉LZ真辛酸，这就掉渣天了）。

$(".btn").on(click,function(){//默认a不带颜色，可以点击
   if(!$(this).has("btn-color")){//
      $(".btn").addClass("btn-color");//颜色变暗，不可点击
      ajax{//
　　　　      。。。。。。。。。。。
          $(".btn").removeClass("btn-color");//又可以点击了
　　    }
   }
}

　　发现这个简单了一点，代码控制的好了一点。不过lz还是决定把流程梳理一下，以防有跟我一样的小伙伴遇到这种问题，为扩大我们的队伍做贡献（义正言辞呀）。主要思路是依靠一个样式来判断状态，主要流程是：

　　1、先行一个样式。样式可以随便啦！默认是没有样式的啦

　　2、在js中判断有没有这个样式，有肯定不能让它进后台了，所以使用了一个！。

　　3、没有就是正常的按钮，可以放它过去，有就不能让它过去。

　　终于把事件解决了，好开心。不过lz也发现好像这个要是直接用浏览器修改一下类是不是也可以提交了。这个问题还没有测试，不过相信lz90%的字母正确率的代码是有用的（那来的自信，lz天生自信满满），后面测试一下在来考虑这个问题了。打扫战场，总结经验，以防止敌人扩大战线（好严肃呀）。回归正题，虽然这是一个很简单的问题，但是也觉的能够学习到东西，主要是以下几点：

　　1、细节与体验方面也是在写代码不可以错过的地方。

　　2、思维方式不能固定，以为button有相应的属性，a标签也会有相关的属性，思维定势。多个角度思考问题。

　　3、小问题也要大思考。

　　lz自身不足：

　　1、经验啦！

　　2、知识面啦！

　　一说不足就字少了，鄙视自己。哈哈，肯定有人问字母正确率这么低不是不足吗？？？哈哈。

　　lz与a标签的相遇就这样结束啦，小伙伴有没有更好的做法呢，lz需要集思广益呢。有的话的请拿起手中的电话拨打以下号码：88888888888