Question

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

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

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

我想阻止多次点击该按钮。

我已尝试在event.preventdefault()函数中使用onclick()函数，但如果我这样做，则href链接无效。还有别的吗？

我的JS代码：

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

        });

Answer 1

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

$('.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;
   }     
});

Answer 3

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

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

Answer 4

你可以写一个这样的函数：

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

jsfiddle

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

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

5 个答案: