1

Tengo el siguiente enlace

<a id="like" class="far fa-thumbs-up fa-lg colorIcono" th:href="${'/respuesta/like/' + respuesta.respuestaSuya.id + '/' + respuesta.id}"></a>

Y lo que deseo es poder ejecutarlo una vez,es decir, que cuando se de una segunda vez no vaya a ningún sitio.

He probado lo siguiente pero se que nunca lo va a abrir por que no le pongo ninguna condición, y no se que tipo de condición poner.

$('#like').click(function() {
         alert("NO");
         return false; 
 });

2 respuestas 2

1

Puedes poner una bandera y prevenir la funcionalidad nativa del elemento. Te dejo un código documentado.

//On ready
$( ()=>{
   
  //Preparamos una bandera
  var clicked = false;
  //Detectamos click, pasamos el evento
  $(document).on('click','.link',function( e ){
    //Validamos si ya se hizo click y prevenimos la funcionalidad por default del elemento
    if( clicked ){
      e.preventDefault();
      
    }else{
      clicked = true;
    }
  });

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="https://www.facebook.com/" class="link">Facebook</a>

1

Se me ocurre que lo hagas del modo siguiente

  1. Obtienes por medio de su idel enlace que tiene la funcionalidad de redigiria otra web
  2. Declaras una variable conteo que servirá para verificar el número de clicks
  3. por medio de un handler verificas el evento clik del elemento HTML que acabas de leer
  4. por dentro de la función que se desencadena en el handler haces un incremento de 1 a la variable conteo de este modo conteo++ para verificar cuantos clicks se han dado
  5. Si el número de clicks es mayor a 1 entonces hacemos que el enlace se deshabilite y para no confudnir al usuario, por medio de innerHTML modifico un div en el cual le aviso que ha dado mas de un click

CÓDIGO

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>JS Bin</title>
    </head>
    <body>
    <a id="ele" href="https://www.facebook.com" target="_blank">Ir a face</a>
      <div id="aviso"></div>
    <script>
        let elemento = document.querySelector("#ele")
        
        conteo = 0
        elemento.addEventListener("click", function(){
          conteo++
          if(conteo > 1){
            console.log(conteo)
          }else{
            elemento.style.pointerEvents = 'none';
            document.querySelector("#aviso").innerHTML = "Limite de clicks alacanzado";
          }
          
        })
    </script>
    </body>
    </html>

ACTUALIZACIÓN

Puedes tratar de mejorar la experiencia de usuario, colocando una instrucción que elimine el subrayado del enlace para que entonces no solo le aparezca el mensaje de limite de clicks alcanzado sino que dicho link se deshabilite y piderda ese aspecto quitandole dicha característica

elemento.style.textDecoration = 'none';

El usuario vería algo como

introducir la descripción de la imagen aquí

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.