¿Cómo usar JavaScript onclick en una etiqueta DIV para alternar la visibilidad de una sección que contiene enlaces en los que se puede hacer clic?

Question

Hola, tengo una sección DIV que solo tiene su título visible inicialmente. Lo que me gustaría lograr es que cuando el visitante hace clic en cualquier parte del área de toggle_section el toggle_stuff div alterna entre visible / oculto.

<div id="toggle_section" 
     onclick="javascript: new Effect.toggle('toggle_stuff', 'slide');">
    <div id="toggle_title">Some title</div>
    <div id="toggle_stuff">
        some content stuff
        <a href="/foo.php">Some link</a>
    </div>
</div>

Sin embargo, la forma en que está configurado en este momento, si tengo algún enlace <a> dentro de <=>, al hacer clic en ese enlace también se ejecutará el evento onclick.

Entonces mi pregunta es ¿cuál sería la mejor manera de establecer este tipo de comportamiento?

Answer 1

La solución más simple es agregar un controlador onclick adicional al enlace dentro de su DIV que detiene la propagación de eventos:

<div id="toggle_section" 
     onclick="javascript: new Effect.toggle('toggle_stuff', 'slide');">
    <div id="toggle_title">Some title</div>
    <div id="toggle_stuff">
        some content stuff
        <a href="/foo.php"
            onclick="Event.stop(event);"
        >Some link</a>
    </div>
</div>

El ejemplo anterior utiliza la función Event.stop() de Prototype para facilitar un navegador cruzado parada de propagación de eventos.

Al usar el controlador onclick() en línea, la mayoría (si no todos) los navegadores atravesarán primero el evento en la fase de burbujeo (que es lo que desea).

Una buena guía para comprender las razones reales detrás de este comportamiento y las diferencias entre captura de eventos y evento burbujeando se puede encontrar en el excelente Quirksmode.

Answer 2

en script:

function overlayvis(blck) {
  el = document.getElementById(blck.id);
  el.style.visibility = (el.style.visibility == 'visible') ? 'hidden' : 'visible';
}

enlace activador, seguido de contenido (no hay razón que no pueda estar en la página):

<div onclick='overlayvis(showhideme)">show/hide stuff</div>
<div id="showhideme">
  ... content to hide / unhide ...
</div>

Obtuve esto de Superposición de JavaScript de ventana modal - tuve que buscar el fuente y me complació descubrir que era este sitio. :)

Answer 3

Después de publicar mi primera pregunta, no podía esperar para tratar de pensarlo una vez más y parece que he encontrado una forma bastante simple de lograrlo.

He movido el onlick Effect.toggle a una función separada como:

function someClick(event) {
    if (event.target.nodeName == 'A') {
        return;
    } else {
        new Effect.toggle('toggle_stuff', 'slide');
    }
}

Supongo que esto solo funcionaría para A etiquetas y no para cualquier otra cosa en la que se pueda hacer clic.

Answer 4

Realmente no sé si esto funcionaría, pero intente darle al elemento de enlace un valor z-index mayor que el toggle_section div.

algo así como:

#toggle_section a { z-index: 10; }

Answer 5

Agregue un controlador onclick para detener la propagación de eventos.

Con el uso de JQuery: onclick = " event.stopPropagation () "

Con uso de prototipo: onclick = " Event.stop (event) "