Question

我的网站有很多<a target="_blank">会调用api

我需要阻止双击这些按钮。

这是我做的事情

.disable {
    pointer-events: none;
}

$(document).ready(function(e) {
    $('a').click(function(){
        $(this).addClass('disable');

        setTimeout(function(){
            $(this).removeClass('disable');
        }, 3000);
    });
});

因为它的目标是空白的，因此我需要那些href在几秒后仍然可以工作。

不知何故，我再也无法启用这些按钮了

Answer 1

问题是this内的setTimeout与其外的this不同。

您可以执行以下操作：

var that = $(this);
that.addClass('disable');

setTimeout(function(){
  that.removeClass('disable');
}, 3000);

然后它应该工作

Answer 2

您可以执行jQuery('.disable').click(function(evt) { evt.preventDefault() })之类的操作。但这只会阻止点击。标签直到进入或其他一些互动可能仍会触发访问。

A＆＃34;更安全＆＃34;方法可能是使用JS暂时将href属性移出并稍后将其移回（例如将原始href目标存储在某处，并替换为javascript:return false;或完全删除href属性

Answer 3

这是一个范围问题。在setTimeout内，this不再引用您要修改的锚元素;而是指向浏览器窗口（因为setTimeout是window对象上的方法）。

解决此问题的经典方法是在单独的变量中捕获this，该变量仍在setTimeout范围内：

$(document).ready(function(e) {
    $('a').click(function(){
        $(this).addClass('disable');
        var self = this;
        setTimeout(function(){
            $(self).removeClass('disable');
        }, 3000);
    });
});

.disable {background-color:#F00}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#">test</a>

或者在ES6中你可以使用胖箭头函数，它不会改变变量范围：

$(document).ready(function(e) {
    $('a').click(function(){
        $(this).addClass('disable');
        setTimeout(()=>{
            $(this).removeClass('disable');
        }, 3000);
    });
});

.disable {background-color:#F00}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#">test</a>

单击后Jquery禁用href并在3秒后启用

3 个答案: