Question

我有一个重新发送电子邮件的链接，但我不想让人们通过垃圾邮件点击该链接。

所以我想我点击后需要让它在5分钟内无法点击。

我发现了如何禁用这样的点击功能：

$('a').click(function(){ return false})

或者这个：

$('a').removeAttr('href')

但是如何确保第一次点击它，人们再也不能再点击5分钟了？并在此期间点击时显示警告？

这可以用jquery完成吗？

Answer 1

您可以利用jquery的href来附加禁用事件处理程序，然后在5分钟后将其删除，而不是删除.one（这可能会导致某些浏览器出现令人讨厌的行为）

结合预先定义原始事件处理程序，我们可以在最初点击链接之前恢复行为。

(function($) {
    var lockLink = function() {
        var link = $(this);

        link.on('click', function(event) {
            event.preventDefault();
            return false;
        });

        window.setTimeout(function() {
            link.off();
            link.one('click', lockLink);
        }, 300000);
    };

    $('document').ready(function() {
        $('a').one('click', lockLink);
    });
})(jQuery);

Answer 2

使用setTimeout功能：

$('a').on('click', function()
{
    var href = $(this).attr('href');

    $(this).removeAttr('href');

    setTimeout(function()
    {
        $(this).attr('href', href);
        alert('can now click me')
    }, 1000 * 60 * 5); // 1000 milliseconds * 60 = minutes * 5 = 5 minutes
})

Answer 3

您可以使用data方法在上次点击元素时存储该元素。

$('#clickme').on("click",function(e){
   let lastClicked = $(this).data("lastclicked");
   if(isNaN(lastClicked) || (new Date() - lastClicked) > (5*1000*60)){
      $(this).data("lastclicked", new Date());
       return true;
   }
   alert("You cant click for 5 minutes")
   e.preventDefault();
   return false;
});

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

您可以添加使用localStorage来使其在页面加载之间保持不变，但遗憾的是，使用堆栈代码无法证明这一点。

要执行此操作，您可以在页面加载时从data预先填充localStorage

$('#clickme').data("lastclicked",localStorage.lastClicked);

并记得写信给它：

 if(!lastClicked || (new Date() - lastClicked) > (5*1000*60)){
      var now = new Date();
      localStorage.lastClicked = now;
      $(this).data("lastclicked", now);
       return true;
   }

最终代码：

let delay = 5*1000*60; // five minutes

$('#clickme')
    .data("lastclicked",localStorage.lastClicked || 0)
    .on("click",function(e){
       let lastClicked = $(this).data("lastclicked");
       if(isNaN(lastClicked) || (new Date() - lastClicked) > delay){
          var now = new Date();
          localStorage.lastClicked = now;
          $(this).data("lastclicked", now);
          return true;
       }
       alert("You cant click for 5 minutes (" + (delay - (new Date() - lastClicked)) + "ms remaining)")
       e.preventDefault();
       return false;
    });

实例：https://jsfiddle.net/7tpcyms6/

Answer 4

向用户提供链接已禁用的可见指示是一件好事。方便的是，您的代码还使用该指标来确定是否应该禁用该链接：

＆＃13;

$('#foo').click(function() {
  var $el = $(this);
  
  if ($el.hasClass('disabled')) {
    // The link is disabled
    return false;
  } else {
    // The link is enabled; do whatever it is supposed to do here

    // ...then disable the link:
    $el.addClass('disabled');
    
    // ...and re-enable it in five seconds:
    window.setTimeout(function() {
      $el.removeClass('disabled')
    }, 5000);
  }
});

＆＃13;

.disabled {
  /* Adjust to taste */
  cursor: default;
  text-decoration:none;
  color: #CCC;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="foo" href="javascript:console.log('Clicked')">Click me</a>

＆＃13;

此方法可以避免因删除href而导致的一些UI问题，并且可以根据需要多次循环开启和关闭（此处您收到的其他一些答案只能使用一次。） not 通过打开多个窗口或重新加载页面来阻止用户绕过超时;如果你真的需要强制执行延迟，那么你需要处理这个服务器而不是浏览器。

Answer 5

实现目标的最简单方法是注册一个函数并在超时后删除它：

＆＃13;

var disabledClick = function(){ 
    return false 
};

$('a').on( "click", disabledClick );

setTimeout(function(){
    $('a').off( "click", disabledClick );
}, 2000);

＆＃13;

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

＆＃13;

实施例： https://jsfiddle.net/xc1ra31a/

Answer 6

<a href="http://www.anylink.com" id="anyLink">Any Link</a>

<script>
$('#anyLink').on('click', function(){
    var href = $("#anyLink").attr('href'); //for further use
    $("#anyLink").removeAttr('href');
var d = new Date();
var time = d.getTime();
var after_time = time + 300000; //added 5 minutes to current time.
});

链接现已停用。在此处进行ajax调用以保存DB中的链接状态，或者您可以根据您的要求使用localstorage。

并将current_time + 5分钟存储在存储器中，并检查当前时间是否> =我们之前存储的时间。然后再次点击链接。

var d = new Date();
var time = d.getTime();
    if(time >= after_time) {
        $("#anyLink").attr('href', href); //clickable now   
    } 


</script>

使链接无法点击一段时间

6 个答案: