防止使用 JS 或 jquery 多次点击链接

Prevent multiple clicks on a link using JS or jquery

本文关键字：链接 jquery JS      更新时间：2023-09-26

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

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

如何防止这些多次单击，并确保在弹出窗口未显示时启用链接。

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

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

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

现在，您可以更新isClicked = false执行$("#popup").hide();

关闭弹出操作上的启用按钮。喜欢这个： 

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

你需要使用一个回调函数，你可以把它放在两个地方之一：作为传递给 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);
    );
});

（请参阅使用 JQuery 删除禁用的属性？，了解为什么您应该使用 prop 而不是 attr

你可以使用 setTimeout。运行该函数以在单击按钮后将其禁用，并调用超时以在一段时间后重新启用它。

使用 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);
});
相关文章：