Question

我有一个链接，点击打开一个模态弹出窗口。如果网络连接速度很慢，则需要一段时间才能打开弹出窗口。如果用户超快，他可能会多次点击该链接，并且屏幕上会出现多个弹出窗口。我想阻止用户多次点击链接。

我在第一次点击时禁用了该链接。但问题是当弹出窗口关闭时，它不会再次启用链接。

如何防止这些多次点击nd确保当弹出窗口未显示时，链接已启用。

$('#link').click(function() {
    $(this).attr("disabled", "disabled");
    $("#popup").show();
});

Answer 1

您可以使用标志变量来跟踪链接是否已被点击，并允许点击事件回调仅在之前未点击时执行。

var isClicked;   
$('#link').click(function() {
   if(isClicked){
     return false;
   }
   isClicked = true; 
   $("#popup").show();
});

现在，您可以更新isClicked = false

所在的$("#popup").hide();

Answer 2

你需要使用一个回调函数，你可以把它放在两个地方中的一个：作为传递给show（）的参数或者在任何脚本中触发模态关闭。

添加它以显示更改：

$('#link').click(function() {
    $(this).attr("disabled", "disabled");
    $("#popup").show();
});

到

$('#link').click(function() {
    var $temp = $(this);
    $(this).prop("disabled", true);
    $("#popup").show(function(){
         $temp.prop("disabled", false);
    );
});

（请参阅Remove disabled attribute using JQuery?了解为什么要使用prop而不是attr

Answer 3

关闭弹出操作时启用按钮。像这样：

$( "#popup" ).hide( "slow", function() {
    $("#link").removeAttr('disabled');
  });

Answer 4

您可以使用setTimeout。单击该按钮后运行该功能以禁用该按钮，并在经过一段时间后调用超时以重新启用该按钮。

Answer 5

使用 setTimeout 和 'pointer-events: none' 总能帮我完成工作。

$('#link').click(function(e) {
  $("#popup").show();
  $(e.currentTarget).css({'pointer-events': 'none', 'cursor': 'not-allowed'});
  setTimeout(() => $(e.currentTarget).css({'pointer-events': 'auto', 'cursor': 'pointer'}), 300);
});

使用JS或jquery阻止对链接的多次单击

5 个答案: