css中的a标签无disable属性，如何禁用a标签的点击事件？

Question

我使用a标签模拟了一个按钮的功能，具体样式如下：

<a href="javascript:;" id="btn_addSDK_upLoadFile"  class="btn">上传</a>

.btn{
    display: inline-block;
    width: 120px;
    height: 30px;
    line-height: 30px;
    border-radius: 4px;
    vertical-align: middle;
    color: #ffffff;
    text-align: center;
    background-color: #48bed1;
}

这个按钮实现的是文件上传功能，我想在文件上传过程中禁用a标签，防止多次提交，本来是使用disable属性，但是没有效果，查看相关文档发现a标签没有disable属性。我改怎么修改禁用a标签的点击事件，并且在上传文件的过程中，将按钮的颜色置为灰色？

Answer 1

个人觉得好的解决办法是，在提交过程中设置一个遮罩层（z-index较大），后台返回结果后隐藏遮罩层。

Answer 2

C3新属性： pointer-events

pointer-events：none

作用：屏蔽所有鼠标事件，可以在上传的时候赋值为none，上传流程完毕设置为auto，

Answer 3

以超链接a作为按钮为例：

/*确定按钮*/
.button{
    border-color: #1E9FFF;
    background-color: #1E9FFF;
    color: #fff;
}
/*不可用的确定按钮*/
.disabled-button{
    border-color: #D4D4D4;
    background-color: #D4D4D4;
    color: #fff;
    cursor:auto;
}

根据按钮的状态设置对应的class，超链接a的事件onclick="submit()"里执行之前，添加判断

function submit(){
    var isDisabled = $("#按钮id").hasClass("disabled-button")
    if(isDisabled){
        //如果处于不可点击状态，返回
        return
    }else{
        //执行对应事件
    }
  }

ps：

//删除不可编辑class
$("#按钮id").removeClass("disabled-button")
//添加不可编辑class
$("#按钮id").addClass("disabled-button")

Answer 4

绑定点击事建，点击后添加相应的disable的class，记得判断是否存在disable的class加相关的逻辑

Answer 5

写一个变量来判断这个文件正在上传，例如isLoading，初始值设为false，当a被点击是首先判断isLoading是否为false，为false便执行，否则就不执行。执行下一步后，立即将其置为true，防止响应下次点击。

Answer 6

因为a标签没有disable这个属性，你可以把a标签换成button试试。这个应该最快。

Answer 7

为什么不用button来实现呢

Answer 8

href 属性 去掉就可以好像。