如何防止多次单击Anchor标记按钮

Question

我有一个锚标记(即取消按钮),在jsp文件中有一个class属性和href属性.

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

当多次单击该按钮时,它会将我带到空白页面或错误页面.

我想阻止多次点击按钮.

我已经尝试event.preventdefault()在我的onclick()函数中使用函数,但如果我这样做,href链接不起作用.还有其他方法吗？

我的JS代码:

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

        });

Answer 1

jQuery one()方法只执行一次click事件:

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

也可以使用jQuery on()方法,当有条件地删除事件时可能更有用:

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

Answer 2

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

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