Comment arrêter l'une des fonctions de clic

J'ai un bouton avec pièce jointe onClick="clickState()". Maintenant, dans clickState j'ai spécifié ce qui se passera une fois que l'utilisateur cliquera sur l'élément pour la première fois. Mais ensuite, j'ai imbriqué un autre événement de clic qui déclenchera une autre fonctionnalité lorsque l'utilisateur cliquera dessus pour la deuxième fois. Le fait est que le code fonctionne, mais le journal de la console enregistre deux fois un état car le second clic lance également la fonction 'premier clic'. En d'autres termes, je veux arrêter la fonction une fois qu'elle a été déclenchée une fois mais je ne veux pas arrêter la fonction qui est à l'intérieur de celle-ci. Aussi, que je viens de réaliser, il y a un petit problème avec la suppression de l'image à l'intérieur. Console dit "button.html: 55 Uncaught TypeError: Echec de l'exécution de 'removeChild' sur 'Node': le paramètre 1 n'est pas de type 'Node' at button.html: 55" Pourquoi cela arrive-t-il?Comment arrêter l'une des fonctions de clic

<!DOCTYPE html> 
<html> 
    <head> 
     <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> 
     <style> 
      #btn { 
      color:#ffed00; 
      line-height:40px; 
      height:40px; 
      vertical-align:middle; 
      width:280px; 
      border-radius:3px; 
      border:2px #000 solid; 
      background: #00a1e0; 
      background: -webkit-linear-gradient(#00a1e0, #00a1e0 60%, #005578 100%); 
      background: -o-linear-gradient(#00a1e0 ,#00a1e0 60%, #005578 100%); 
      background: -moz-linear-gradient(#00a1e0, #00a1e0 60%, #005578 100%); 
      background: linear-gradient(#00a1e0, #00a1e0 60%, #005578 100%); 
      box-shadow: 0px 2px 4px rgba(0,0,0,0.35); 
      font-family:Roboto; 
      font-size:16px; 
      text-transform:uppercase; 
     } 

     #btn.active { 
      color:#00a1e0; 
      border:2px solid #00a1e0; 
      background: #000000; 
      background: -webkit-linear-gradient(#000000, #005578 40%, #005578 100%); 
      background: -o-linear-gradient(#000000, #005578 40%, #005578 100%); 
      background: -moz-linear-gradient(#000000, #005578 40%, #005578 100%); 
      background: linear-gradient(#000000, #005578 40%, #005578 100%); 
     } 
     #btn:disabled { 
      color:#999999; 
      border:2px #999999 solid; 
      background:#cccccc; 
     } 
    </style>   
    <script> 
     var currentState = "Initial button"; 
     function clickState() { 
      if (currentState == "Loading button") 
      { 
       return; 
      } 
      else 
      { 
       var btn = document.getElementById("btn"); 
       btn.innerHTML = '<img src="loading.gif" id="imgLoading" alt="Loading" width="25" height="25" />'; 
       currentState = "Loading button"; 

       setTimeout (function() { 
        btn.className += " active"; 
        btn.removeChild(document.getElementById("imgLoading")); 
        currentState = "Hit button"; 
        console.log(currentState); 

         btn.addEventListener("click", function() { 
         btn.disabled = true; 
         currentState = "Disabled button"; 
         btn.removeChild(document.getElementById("imgLoading")); 
         console.log(currentState); 
        }); 
       }, 5000); 

       console.log(currentState); 
      } 
     } 
     console.log(currentState); 
    </script> 
</head> 
<body> 
    <button id="btn" onclick="clickState();">Opt me in</button> 
</body>

Source

2017-09-21 Mateusz Osuch

Retirez l'écouteur d'événement une fois que le bouton a été cliqué.

Essayez ceci:

btn.addEventListener("click", function() { 
    btn.removeEventListener("click"); // remove event listener 
    btn.disabled = true; 
    currentState = "Disabled button"; 
    btn.removeChild(document.getElementById("imgLoading")); 
    console.log(currentState); 
});

Source

2017-09-21 16:51:08 Dedering

J'ai essayé ceci (n'a pas fonctionné) mais bon, ne supprimera-t-il pas que nous avons juste fait? –

Il doit supprimer l'écouteur d'événement après son lancement. – Dedering

Au lieu d'ajouter onClick="clickState()" à l'élément. Essayez d'ajouter l'écouteur d'événement dans JS.

document.getElementById("btn").addEventListener("click", clickState);

Source

2017-09-21 17:00:33 Dedering

Comment arrêter l'une des fonctions de clic

Répondre

Questions connexes