如何在DIV标记上使用javascript onclick切换包含可单击链接的部分的可见性？

嗨，我有一个DIV部分，最初只有它的标题可见。我想实现的是，当访问者单击

toggle\u部分

区域的任何位置时，

toggle\u内容

div在可见/隐藏之间切换

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

一些头衔
一些内容

但是，现在的设置方式是，如果在

切换\u部分中有任何
链接，单击该链接也将执行onclick事件

那么我的问题是，设置这种行为的最佳方式是什么？
我不知道这是否有效，但尝试给link元素一个比toggle\u section div更大的
z-index
值

比如：

#toggle_section a { z-index: 10; }

最简单的解决方案是向DIV中的链接添加一个额外的onclick处理程序，该链接可停止事件传播：

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


一些头衔
一些内容

上面的示例使用Prototype的函数来促进跨浏览器事件传播停止

当您使用内联
onclick（）
处理程序时，大多数（如果不是全部）浏览器将首先在冒泡阶段遍历事件（这是您想要的）

了解这种行为背后的实际原因以及事件捕获和事件冒泡之间的差异的一个很好的指南可以在优秀的
网站上找到。在我发布了我的第一个问题后，我迫不及待地想再次思考它，似乎我已经找到了一种非常简单的方法来实现这一点

我已将onlick
效果。切换到一个单独的功能中，如：

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

我想这只适用于
A
标记，而不适用于任何其他可单击的标记。
添加onclick处理程序以停止事件传播

使用JQuery时，请使用：
onclick=“event.stopPropagation（）”

原型使用：
在脚本中单击onclick=“Event.stop（Event）”
：

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

activator链接，后跟内容（页面上没有其他原因）：


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