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>
Not being able to think or find a way to block any click after the user has already clicked the link, only release the link again after the page reloads. can be in jquery
What you can do to block is to get the amount of click , if it equals 1, it blocks the element with preventDefault() , as you can see in the example below, it enters the first "#" link and then when I change to another link it does not go in 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><ahref="#" id="teste">Adicionar no Carrinho</a>
</body>
</html>Another suggestion, add a class to the links you want to click only once, and when the links with that class are clicked, check for a particular property. If it exists, cancel the event, if it does not, just add that property to the element.
See 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 working 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><divclass="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 better to see and do some tests: