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

micstone
  • 1.6k

我使用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标签的点击事件,并且在上传文件的过程中,将按钮的颜色置为灰色?

回复
阅读 34.9k
8 个回答
✓ 已被采纳

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

C3新属性: pointer-events

pointer-events:none

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

以超链接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")

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

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

๑绅士小浩๑
  • 1
新手上路,请多包涵

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

你知道吗?

宣传栏