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

Question

嗨我有一个DIV部分，最初只能看到它的标题。我想要实现的是，当访问者点击toggle_section区域的任何地方时，toggle_stuff 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>

但是，现在的设置方式，如果我在<a>中有任何<=>链接，点击该链接也会执行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。

Answer 2

脚本中的

：

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

激活器链接，后跟内容（没有理由不能在页面上显示其他内容）：

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

我从模态窗口javascript css叠加层获取此信息 - 必须搜索来源并很高兴地发现这是这个网站。 ：）

Answer 3

在我发布第一个问题之后，我迫不及待想再试一次，似乎我找到了一种非常简单的方法来实现这一目标。

我已将onlick Effect.toggle移动到一个单独的函数中，如：

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

我认为这只适用于A标签，而不适用于其他任何可点击的标签。

Answer 4

我真的不知道这是否可行，但尝试给link元素一个比toggle_section div更大的z-index值。

类似的东西：

#toggle_section a { z-index: 10; }

Answer 5

添加onclick处理程序以停止事件传播。

使用JQuery： <！>的onclick = QUOT; event.stopPropagation（）QUOT <！>;

使用原型： <！>的onclick = QUOT; Event.stop（事件）QUOT <！>;