Comment arrêter l'événement click de l'exécution en fonction Javascript?

Question

J'essaie d'attribuer l'événement onclick à une balise d'ancrage qui existe déjà lorsque je clique sur un autre élément. Cependant, tout ce que j'ai essayé semble avoir pour conséquence le déclenchement de l'événement immédiatement après l'attribution. 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 constater, j'ai essayé plusieurs méthodes pour affecter l'événement onclick à la balise d'ancrage et aucune d'entre elles ne fonctionne correctement. Au début, j'ai supposé que la fonction Effect.Appear sur la balise anchor pouvait déclencher l'événement onclick. J'ai donc essayé de déplacer l'affectation d'événement après la fonction showStep, mais cela ne faisait aucune différence. De plus, j’ai essayé d’appeler la fonction stop () immédiatement après l’affectation, mais cela ne faisait aucune différence non plus.

Je suis au bout de mes peines. Existe-t-il un moyen pour moi d'assigner 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, cela signifie que vous pouvez les affecter à des variables ou les transmettre en tant qu’arguments à d’autres fonctions. Dans votre code, vous confondez les appels de fonction avec les références aux fonctions.

Regardez ce code:

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

Cela transmet 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 fonction. Vous pouvez le réparer facilement en modifiant le code comme suit:

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