¿Cómo detener la ejecución del evento Click en la función Javascript?

Question

Estoy intentando asignar el evento onclick a una etiqueta de anclaje que ya existe cuando hago clic en otro elemento. Sin embargo, todo lo que he intentado parece dar lugar a la activación del evento inmediatamente después de la asignación. Estamos usando Prototype y Scriptaculous.

Esta es la función:

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

Como puede ver, he intentado varias formas de asignar el evento onclick a la etiqueta de anclaje y ninguna de ellas funciona correctamente. Al principio supuse que la función Effect.Appear en la etiqueta de anclaje podría estar activando el evento onclick, así que intenté mover la asignación del evento después de la función showStep, pero eso no hizo ninguna diferencia. Además, intenté llamar a la función stop () inmediatamente después de la asignación, pero eso tampoco hizo ninguna diferencia.

Estoy loco por esto. ¿Hay alguna forma de asignar el evento onclick a la etiqueta de anclaje sin que el evento se active automáticamente? ¿Qué estoy haciendo mal?

Answer 1

Las funciones son objetos de primera clase en Javascript, esto significa que puede asignarlas a variables o pasarlas como argumentos a otras funciones. En su código, está confundiendo llamadas a funciones con referencias a funciones.

Eche un vistazo a este código:

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

Qué hace esto pasa el resultado de la llamada a " loadData " a la función observar. Lo que desea hacer es pasar una referencia a la llamada a la función en su lugar. Puede solucionarlo fácilmente cambiando el código a esto:

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