Comment faire pour arrêter l'événement Click de s'exécuter dans la fonction Javascript?

Question

J'essaye d'assigner l'événement onclick à une étiquette d'ancre qui existe déjà quand je clique sur un autre élément. Cependant, tout ce que j'ai essayé semble entraîner le déclenchement de l'événement immédiatement après l'affectation. Nous utilisons Prototype et Scriptaculous.

C'est la fonction:

<script type="text/javascript">  
    function loadData(step, dao_id) { 
     var div_id = 'div_' + step; 
     var anchor_id = 'step_anchor_' + step; 
     var prv = step -1; 

     switch(step) { 
      case 1: 
       var action = 'major_list'; 
       break; 
      case 2: 
       var action = 'alumni_list'; 
       break; 
      case 3: 
       var action = 'alumnus_display'; 
       break; 
     } 

     new Ajax.Request('awizard.php', { 
       method: 'get', 
       parameters: {action : action, dao_id : dao_id}, 
       onSuccess: function(data) { 
        $(div_id).innerHTML = data.responseText; 
        //$(anchor_id).observe('click', loadData(prv, dao_id, true)); 
        //Event.observe(anchor_id, 'click', alert('I executed')); 

        showStep(step); 

        //$(anchor_id).onclick = loadData(prv, dao_id, true); 
        //$(anchor_id).observe('click', loadData(prv, dao_id, true)); 

       } 
      } 
     )     
    } 

    function showStep(step, toggleBack) { 

     var div_id = 'div_' + step; 
     if(!toggleBack) { 
      if(step != 1) { 
       var prv = step -1; 
       Effect.SlideUp('div_' + prv, { duration:1, delay:0 }); 
      } 

      Effect.SlideDown(div_id, { duration:1, delay:1 }); 
      Effect.Appear('step_anchor_' + step, { duration:1, delay:2 }); 
     } else { 

      var prv = step -1; 
      Effect.SlideDown('div_' + prv, { duration:1, delay:0 }); 
      Effect.SlideUp(div_id, { duration:1, delay:1 }); 
      Effect.Fade('step_anchor_' + step, { duration:1, delay:2 }); 
     }    
    } 
</script> 

Comme vous pouvez le dire que je l'ai essayé plusieurs façons d'attribuer l'événement onclick à la balise d'ancrage et aucun d'entre eux fonctionnent correctement. Au début, j'ai supposé que la fonction Effect.Appear sur la balise d'ancrage pouvait déclencher l'événement onclick, donc j'ai essayé de déplacer l'affectation d'événement après la fonction showStep mais cela n'a fait aucune différence. De plus, j'ai essayé d'appeler la fonction stop() immédiatement après l'affectation, mais cela ne faisait pas de différence non plus.

Je suis à bout de nerfs avec ça. Est-il possible pour moi d'affecter l'événement onclick à la balise d'ancrage sans que l'événement se déclenche automatiquement? Qu'est-ce que je fais mal?

Answer 1

Les fonctions sont des objets de première classe en Javascript, ce qui signifie que vous pouvez les affecter à des variables ou les transmettre comme arguments à d'autres fonctions. Dans votre code, vous confondez les appels de fonction avec des références aux fonctions.

Jetez un oeil à ce code:

$(anchor_id).observe('click', loadData(prv, dao_id, true)); 

Qu'est-ce que cela ne passer le résultat de l'appel à « loadData » à la fonction observer. Ce que vous voulez faire est de passer une référence à l'appel de la fonction à la place. Vous pouvez le réparer facilement en changeant le code à ceci:

$(anchor_id).observe('click', function() { loadData(prv, dao_id, true) });