CODEWITHSUNDEEP
javascriptjquery
JokerBean
JokerBean

Reputation: 423

How to prevent more than one click on an Anchor tag button

I have an anchor tag (namely Cancel button) with a class attribute and href attribute in a jsp file .

I have written an onclick event for the class attribute in a seperate js file. So when the button is clicked, the onclick event executes and then takes to the href link.

When the button is clicked more than once it takes me to an empty page or an error page.

I want to prevent more than one click on the button.

I have tried using event.preventdefault() function inside my onclick() function but the href link is not working if I do that. Any other way?

My JS code:

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

        });

Upvotes: 10

Views: 4370

Answers (5)

Rohit Sharma
Rohit Sharma

Reputation: 3334

jQuery one() method will perform click event only once:

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

Also possible using jQuery on() method that may be more useful when the event should be removed conditionally:

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

Or like this:

$('.cancel-btn').on('click', function(evt) {
  // code here
  // then remove the event handler.
  $(this).off('click');
});

Upvotes: 12

Milan Chheda
Milan Chheda

Reputation: 8249

As you mentioned the event is written on that class, you can use this simple code to ensure that its clicked only once:

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

This code will remove the class from the DOM and hence the click event will never get fired.

Optionally, You can use off() to remove an event like so:

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

This will remove all click events bound to this element. In your code, it would be like:

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

Upvotes: 1

Julien
Julien

Reputation: 1238

you can write a function like this:

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

jsfiddle

Upvotes: 1

Shiladitya
Shiladitya

Reputation: 12161

Here you go with one more way to do it using pointer-events as none https://jsfiddle.net/w2wnuyv6/1/

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

Upvotes: 3

Ankit Agarwal
Ankit Agarwal

Reputation: 30739

Try using a boolean flag to make sure the function executes only once 

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

Upvotes: 5

Related Questions