首页 文章

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

提问于
浏览 次
10

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

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

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

我想防止多次点击按钮 .

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

我的JS代码：

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

        });
javascript jquery

5 回答

  • 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');
});
    回复于
  • 1

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

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

    jsfiddle

    回复于
  • 11

    在这里，你还有一种方法可以使用指针事件来做到这一点，因为没有https://jsfiddle.net/w2wnuyv6/1/

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

    正如您所提到的那样，事件写在 class 上，您可以使用这个简单的代码来确保它只被点击一次：

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

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

    Optionally ，您可以使用off()删除这样的事件：

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

    这将删除绑定到此元素的所有单击事件 . 在您的代码中，它将是：

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

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

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

相关问题