Javascript 如何防止在定位标记按钮上多次单击

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

我已经在一个单独的js文件中为class属性编写了一个

onclick

事件。因此，当单击按钮时，onclick事件将执行，然后转到href链接

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

我想阻止多次单击按钮

我已尝试在我的

onclick（）

函数中使用

event.preventdefault（）

函数，但如果这样做，href链接将无法工作。 还有别的办法吗

我的JS代码：

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

        });

jQuery方法将只执行一次单击事件：

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

$（'.cancel btn'）。一个（'click'，函数（evt）{
//evt.preventDefault（）；
//代码在这里
});

还可以使用jQuery方法，在有条件删除事件时，jQuery方法可能更有用：

let count=0；//或者可以是布尔标志
$（'.cancel btn'）。在（'click'，函数（evt）上{
如果（计数=0）{
计数++；
//代码在这里
}否则{
返回false；
//或evt.preventDefault（）；
}
});

或者像这样：

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

$（'.cancel btn'）。打开（'click'，函数（evt）{
//代码在这里
//然后删除事件处理程序。
$（此）.off（'click'）；
});

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

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

---

在这里，您可以使用指针事件作为none来完成这项工作

---

您可以编写如下函数：

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

---

如您所述，事件是在该

类上编写的，您可以使用此简单代码确保其仅单击一次：

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

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

您可以选择使用来删除以下事件：

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

这将删除绑定到此元素的所有单击事件。在您的代码中，类似于：

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

看看JSFIDLE的好答案！最好是直接在帖子中提供相关细节-“
。one（）
与
。on（）
相同，只是处理程序在第一次调用后被解除绑定。”@RohitSharma尝试使用one（）方法，但你的第二个答案对我有效：）。。我在else类中使用了preventDefault（）而不是return false。非常感谢您的帮助。