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
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
– MichaelCosta