0

Tenho o seguinte código

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

Não to conseguindo pensar nem encontrar uma forma de bloquear qualquer click depois que o usuário já tiver clicado no link, só liberar o link novamente depois que a página recarregar. pode ser em jquery

1
  • assim que a página recarregar pode ser adicionado, o problema é as vezes a página pode demorar alguns segundos, e muitas pessoas não percebem que já está sendo processado, e acaba clicando de novo.. até a página ir.. então acaba adicionando até 5 produtos no carrinho Commented 28/08/2018 às 17:22

2 Respostas 2

1

O que você pode fazer para bloquear é pegar a quantidade de click, se for igual a 1, bloqueia o elemento com preventDefault(), como você pode ver no exemplo abaixo, ele entra no primeiro link "#" e depois quando eu altero para outro link ele não entra mais:

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>

9
  • não posso colocar o link dentro do javascript @GabrielGonçalves porque recebo a variavel dentro do blade do laravel.. e não quero criar input com valor da variavel. queria algo apenas em jquery ou js puro Commented 28/08/2018 às 17:38
  • o elemento.href que coloquei, é para teste, para visualizar que não é possível acessar o link novamente Commented 28/08/2018 às 17:41
  • show de bola mano! realmente funcionou.. mas teria como transformar esse addEventListener em jquery Commented 28/08/2018 às 17:45
  • pois tenho 2 botões.. addtocart e deltocart Commented 28/08/2018 às 17:46
  • consegui.. troquei o "elemento.addEventListener" por $("#addtocart, #deltocart").on... Commented 28/08/2018 às 17:48
0

Outra sugestão, adicione uma classe nos links que você quer clicar apenas uma vez, e quando os links com essa classe forem clicados, verifique a existência de uma determinada propriedade. Caso ela exista, cancele o evento, caso não exista, apenas adicione essa propriedade no elemento.

Veja no exemplo abaixo, o primeiro link só vai funcionar na primeira vez, na segunda ele não altera a barra de rolagem, enquanto o segundo continua funcionando normalmente:

$(".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>

Coloquei também no Codepen, que acho melhor para ver e fazer alguns testes:

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

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .