如何防止在单击锚标签按钮时出现多次点击

Question

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

我在一个独立的js文件中为class属性编写了一个onclick事件。因此，当单击该按钮时，onclick事件将被执行，然后跳转到href链接。

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

我想防止多次单击该按钮。

我尝试在我的onclick()函数中使用event.preventdefault()函数，但是如果这样做，href链接将无法正常工作。还有其他方法吗？

我的JS代码：

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

        });

- JokerBean

---

请查看jsfiddle https://jsfiddle.net/w2wnuyv6/1/ - Shiladitya

Answer 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');
});

- Rohit Sharma

---

好的回答！在帖子中提供相关细节并链接到源始终是更好的选择 - “.one()与.on()相同，只是处理程序在第一次调用后被解除绑定。” - wahwahwah

@RohitSharma 我尝试使用了one()方法，但是你的第二个答案对我有用 :).. 我在else类中使用了preventDefault()而不是return false。非常感谢你的帮助。 - JokerBean

Answer 2

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

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

- Ankit Agarwal

Answer 3

这里提供另一种使用pointer-events属性的方法来实现，将其设置为none https://jsfiddle.net/w2wnuyv6/1/

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

- Shiladitya

Answer 4

你可以编写以下类似的函数：

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

jsfiddle

的英译中文为：

{{链接1：jsfiddle}}

。

- Julien

Answer 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");
    });

- Milan Chheda