href with single click until page Reload

Asked

Viewed 66 times

0

I have the following code 

<a href="{{ route('carrinho.deltocart', $item['id']) }}" id="deltocart"><i class="fas fa-minus-circle"></i></a>
<a href="{{ route('carrinho.addtocart', $item['id']) }}" id="addtocart"><i class="fas fa-plus-circle"></i></a>

I can not think or find a way to block any click after the user has already clicked on the link, only release the link again after the page reload. can be in jquery

javascript jquery

  • Once the reload page can be added, the problem is sometimes the page may take a few seconds, and many people do not realize that it is already being processed, and end up clicking again.. until the page goes.. then ends up adding up to 5 products in the cart

2 answers

1


What you can do to block is catch the amount of click, if equal to 1, locks the element with preventDefault(), as you can see in the example below, it enters the first link "#" and then when I switch to another link it does not enter anymore:

click = 0;
$("#teste").click(function(){
  if(click == 0){
      alert("Redireciona para #");
      click = 1;
   }
   else{
      event.preventDefault();
      elemento.href = "teste2.html";
   }
});
<!DOCTYPE html>
<html>
<head>
   <title>teste</title>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
   <a href="#" id="teste">Adicionar no Carrinho</a>
</body>
</html>

  • I can’t put the link inside the javascript @Gabrielgonçalves because I get the variable inside the Slide.. and don’t want to create input with variable value. wanted something just in jquery or js pure

  • the elemento.href that I put, is for testing, to view that it is not possible to access the link again

  • show ball mano! really worked.. but would have how to turn this addeventlistener into jquery

  • because I have 2 buttons. addtocart and deltocart

  • got it.. I swapped the "addeventlistener element" for $("#addtocart, #deltocart"). on...

  • now yes bro! funfando top! vlw thanks brother

  • changed the code, using Jquery now

  • filet.. eliminates the first line there as well.. to be clean haha code

  • I forgot to take, xd

Show 4 more comments

0

Another suggestion, add a class to the links you want to click just once, and when the links to this class are clicked, check for a certain property. If it exists, cancel the event, if it does not exist, just add this property to the widget.

See in the example below, the first link will only work the first time, the second it does not change the scroll bar, while the second continues to work normally:

$(".1click").click(function(e) {
  var $this = $(this);
  if ($this.prop('jaClicou')) {
    console.log('ja clicou');
    e.preventDefault();
  } else {
    console.log('1 click')
    $this.prop('jaClicou', true);
  }
});

$("a").click(function() {
  console.log('click');
  var total = $("#total").html();
  console.log(total);
  $("#total").html(parseInt(total) + 1);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <p>O primeiro link só funciona no primeiro clique, o segundo é normal e funciona sempre. Os outros eventos adicionados aos links funcionam normalmente, como o evento para contagem de cliques.</p>
  <ul><li><a href="#" class="1click">Só pode haver um clique</a></li></ul>
  <ul><li><a href="#">Clique o quanto quiser</a></li></ul>

  <p>Total de cliques: <span id="total">0</span></p>
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
</div>

I also put in Codepen, which I think is best to see and do some tests:

https://codepen.io/dudaskank/pen/MqeLMM

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.