如何防止多次单击锚标记按钮答案

【问题标题】：How to prevent more than one click on an Anchor tag button如何防止多次单击锚标记按钮
【发布时间】：2017-07-08 06:39:21
【问题描述】：

我在 jsp 文件中有一个带有 class 属性和 href 属性的锚标记（即取消按钮）。

我已经为单独的 js 文件中的 class 属性编写了 onclick 事件。因此，当单击按钮时，会执行 onclick 事件，然后转到 href 链接。

当按钮被多次点击时，它会将我带到一个空白页面或错误页面。

我想防止按钮被多次点击。

我尝试在我的onclick() 函数中使用event.preventdefault() 函数，但如果我这样做，href 链接将不起作用。还有什么办法吗？

我的 JS 代码：

$('.cancel-btn').on('click',function(evt){
            //evt.preventDefault();
           //My Code            

        });

【问题讨论】：

看看 jsfiddle jsfiddle.net/w2wnuyv6/1

标签： javascript jquery

【解决方案1】：

jQuery one() 方法只会执行一次点击事件：

$('.cancel-btn').one('click',function(evt){
  // evt.preventDefault();
  // code here            
});

也可以使用 jQuery on() 方法，在有条件地删除事件时可能更有用：

let count = 0; // or may be a boolean flag
$('.cancel-btn').on('click', function(evt){
  if (count == 0) {
    count++;
    // code here
  } else {
    return false;
    // or evt.preventDefault();
  }
});

或者像这样：

$('.cancel-btn').on('click', function(evt) {
  // code here
  // then remove the event handler.
  $(this).off('click');
});

【讨论】：

好答案！ link to the source 并直接在帖子中提供相关详细信息总是更好 - “.one() 与 .on() 相同，但第一次调用后处理程序未绑定。”
@RohitSharma 已尝试使用 one() 方法，但您的第二个答案对我有用:).. 我在 else 类中使用了 preventDefault() 而不是 return false。非常感谢您的帮助。

【解决方案2】：

尝试使用布尔标志来确保函数只执行一次

var executeOnce = false;
$('.cancel-btn').on('click',function(evt){
   if(!executeOnce){
     //evt.preventDefault();
     //My Code  
     executeOnce = true;
   }     
});

【讨论】：

【解决方案3】：

在这里，您可以使用另一种方法来使用指针事件作为无 https://jsfiddle.net/w2wnuyv6/1/

$('a[value="cancel"]').click(function(){
    $(this).css({
        'pointer-events': 'none'
    });
});

【讨论】：

【解决方案4】：

你可以这样写一个函数：

function clickOnce (element ,listener){
    element.addEventListener("click", function (event){
        listener(event);
        element.removeEventListener("click", arguments.callee);
    });
}

jsfiddle

【讨论】：

【解决方案5】：

正如你提到的事件写在class上，你可以使用这个简单的代码来确保它只被点击一次：

$('.cancel-btn').on('click', function(evt) {
  // execue your code
  $(this).removeClass('cancel-btn');
});

此代码将从 DOM 中删除该类，因此永远不会触发 click 事件。

可选地，您可以使用off() 来删除这样的事件：

$(".cancel-button").off("click");

这将删除绑定到该元素的所有点击事件。在您的代码中，它会像：

    $('.cancel-btn').on('click', function(evt) {
      // execue your code
      $(this).off("click");
    });

【讨论】：