Como usar javascript onclick em uma tag DIV para a visibilidade de alternância de uma seção que contém links clicáveis?

Question

Oi Eu tenho uma seção DIV que tem apenas o título visível inicialmente. O que eu gostaria de conseguir é que quando o visitante clica em qualquer lugar na área de toggle_section alterna toggle_stuff div entre visível / 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>

No entanto, a forma como é set-up agora, se eu tiver qualquer link <a> dentro do toggle_section, clicar nesse link irá também executar o evento onclick.

Então, minha pergunta é qual seria a melhor maneira de definir este tipo de comportamento?

Answer 1

A solução mais simples é adicionar um manipulador onclick extra para o link dentro de seu DIV que pára a propagação do evento:

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

O exemplo acima usa a função Event.stop() de Prototype, a fim de facilitar a propagação do evento cross browser stop.

Como você usa o manipulador de linha onclick(), a maioria (se não todos) navegador irá percorrer o evento na fase borbulhando primeiro (que é o que você quiser).

Um bom guia para compreender as razões reais por trás deste comportamento e as diferenças entre evento captura e evento bolha pode ser encontrada no excelente Quirksmode.

Answer 2

no script:

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

ativador link, seguido por conteúdo (nenhuma razão que não poderia ser outra coisa na página):

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

Eu tenho esse de Modal javascript css sobreposição - teve que procurar o fonte e ficou satisfeito ao descobrir que era este site. :)

Answer 3

Depois que eu postei a minha primeira pergunta que eu não podia esperar para tentar pensar sobre isso mais uma vez e parece que eu encontrei uma maneira muito simples de alcançar este objectivo.

Mudei o Effect.toggle onlick em uma função separada como:

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

Suponho que isto seria apenas trabalho para tags A e não qualquer outra coisa que é, porém clicável.

Answer 4

Eu realmente não sei se isso iria funcionar, mas tente dar o elemento link um valor z-index maior do que a div toggle_section.

algo como:

#toggle_section a { z-index: 10; }

Answer 5

Adicionar um manipulador onclick para a propagação do evento parada.

Com o uso JQuery: onclick = "event.stopPropagation ()"

Com o uso Prototype: onclick = "Event.stop (evento)"