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

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

阅读 26.9k
评论 更新于 2017-07-05
    8 个回答
    micstone
    • 1.5k

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

    评论 赞赏 2017-08-30

      C3新属性: pointer-events

      pointer-events:none

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

      评论 赞赏 2017-07-05

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

        评论 赞赏 2017-07-05

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

          评论 赞赏 2017-07-05
            ๑绅士小浩๑
            • 1
            • 新人请关照

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

            评论 赞赏 2018-04-10

              以超链接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")
              评论 赞赏 2018-04-20

                为什么不用button来实现呢

                该答案已被忽略,原因:不符合答题规范,内容不是答案,可用评论、投票替代

                评论 赞赏 2017-07-05

                  href 属性 去掉就可以好像。

                  该答案已被忽略,原因:不符合答题规范,内容不是答案,可用评论、投票替代

                  评论 赞赏 2017-08-30
                    撰写回答

                    登录后参与交流、获取后续更新提醒