Как предотвратить более одного нажатия кнопки тега привязки

У меня есть якорный тег (а именно кнопка "Отмена" ) с атрибутом класса и атрибутом href в файле jsp.

Я написал событие onclick для атрибута класса в отдельном js файле. Поэтому, когда кнопка нажата, событие onclick выполняется, а затем переходит к ссылке href.

Когда кнопка нажата более одного раза, она выводит меня на пустую страницу или страницу с ошибкой.

Я хочу предотвратить более одного нажатия кнопки.

Я попытался использовать функцию event.preventdefault() внутри моей функции onclick(), но ссылка href не работает, если я это сделаю. Любой другой способ?

Мой код JS:

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

        });

Ответ 1

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

Ответ 2

Попробуйте использовать логический флаг, чтобы убедиться, что функция выполняется только один раз

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

Ответ 3

Здесь вы делаете еще один способ сделать это с помощью указателей-событий, поскольку ни один https://jsfiddle.net/w2wnuyv6/1/

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

Ответ 4

вы можете написать такую функцию:

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

jsfiddle

Ответ 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");
    });