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

Question

嗨,我有一个DIV部分,最初只能看到它的标题.我想实现的是,当访问者在任何地方点击的区域toggle_section的toggle_stuffDIV可见/隐藏之间切换.

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

但是,它现在的设置方式,如果我在其中有任何<a>链接toggle_section,单击该链接也将执行onclick事件.

那么我的问题是设置这种行为的最佳方法是什么？

Answer 1

最简单的解决方案是在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的Event.stop()函数以便于跨浏览器事件传播停止.

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

理解这种行为背后的实际原因以及事件捕获和事件冒泡之间的差异的良好指南可以在优秀的Quirksmode中找到.