如何防止多次点击一个锚标签按钮

我有一个锚标签（即取消按钮）在jsp文件中具有class属性和href属性。如何防止多次点击一个锚标签按钮

我已经写了一个onclick事件的类属性在一个单独的js文件。所以当按钮被点击时，onclick事件就会执行，然后进入href链接。

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

我想阻止多个点击按钮。

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

我的JS代码：

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

     });

来源

2017-07-08 JokerBean

看一看到的jsfiddle https://jsfiddle.net/w2wnuyv6/1/ – Shiladitya

jQuery的one()方法使用执行click事件只有一次

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

也有可能jQuery的on()方法

var count = 0; 
$('.cancel-btn').on('click',function(evt){ 
    if (count == 0) { 
     count++; 
     //code here 
    } else { 
     return false; 
    } 
});

来源

2017-07-08 06:44:20

[jQuery的一个（）方法（HTTPS：//www.w3schools。 com/jquery/event_one.asp） –

很好的答案！ “（链接到源代码）（http://api.jquery.com/one/）总是比较好，并直接在后面提供相关的详细信息 - ”'.one（）'和'.on（） '除非处理程序在第一次调用后被解除绑定。“ – wahwahwah

@RohitSharma尝试使用one（）方法，但你的第二个答案适用于我:) ..我在else类中使用了preventDefault（）而不是返回false。非常感谢您的帮助。 – JokerBean

尝试使用布尔标志确保该功能只执行一次

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

来源

2017-07-08 06:47:08

在这里你有另一种方式去做使用指针的事件没有 https://jsfiddle.net/w2wnuyv6/1/

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

来源

2017-07-08 06:53:16 Shiladitya

有趣而简单的方法。我今天学到了东西！ – Armfoot

你可以写这样的功能是：

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

jsfiddle

来源

2017-07-08 07:37:23 Julien

正如你所提到的，事件是写在那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"); 
    });

来源

2017-07-09 06:38:45

如何防止多次点击一个锚标签按钮

回答

相关问题