如何删除a标签onclick事件及让点击事件失效？简单的防重复点击功能

如何删除a标签onclick事件及让点击事件失效？简单的防重复点击功能

前端  /  管理员 发布于 2021-04-29 10:26:44   33

把a标签的onclick属性移除，让他失效，简单的防止重复页面重复点击功能

a标签代码：

<a href="javascript:;" title="为此评论点赞" style="color:#ada5a5;font-size: 16px;" onclick="dianzan(this,1,'')"><i class="icon ion-thumbsup"></i> <span class="rezan">1</span></a>

移除点击事件 我放在dianzan这函数里面：

点击成功移除onclick属性代码：

$(obj).removeAttr("onclick");//防重复点击

下面为完整代码：

//文章点赞
function dianzan(obj,id,_token) {
    id = id;
    _token = _token;
    $.ajax({
        url: "/art/dianzan",//请求地址
        type: "post",//请求方式
        dataType: "json",//返回数据类型
        data: {_token:_token,id:id},//发送的参数
        success: function (d) {
            console.log(d);
            if(d.error==0){
                alert(d.info);
            }else{
                $(obj).children('.rezan').html(d.zan);
                $(obj).removeAttr("onclick");//防重复点击
            }
        },
        error:function(d){
            alert("错误代码："+ d.status +'请登录后操作');
            if (d.status == 401) {
                window.location.href = "/user/login";
            }
        }
    })
}

效果就是：

点击一次点赞按钮后第二次就不能点了，再一次点的话需要刷新页面

所以是个简单的防重复点击

完整的防止重复点击功能思路：

前端结合后端

后端可能用到时间戳+ip+客户端设备唯一标识+uid等等

前端根据后端的返回的数据进行对事件的移除或者添加及什么时候移除什么时候添加等操作

完