如何使用JavaScript的onclick事件在DIV标签上切换可点击链接的部分的可见性？

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>

然而，目前的设置方式是，如果我在 toggle_section 中有任何一个 <a> 链接，则点击该链接也会执行 onclick 事件。

那么我的问题是，如何最好地设置这种行为？

- Miroslav Solanka

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上找到。

- Aron

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>

我从Modal window javascript css overlay获取了这个代码 - 必须搜索源代码，并很高兴发现它是这个网站。:)

- Chris

Answer 3

在我发布了第一个问题后，我迫不及待地想再次思考它，似乎我已经找到了一种非常简单的方法来实现这个问题。

我将 Effect.toggle 的 onlick 放入一个独立的函数中，如下所示：

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

我想这只适用于可点击的 A 标签，而不是其他任何可点击的内容。

- Miroslav Solanka

Answer 4

添加一个onclick处理程序来停止事件传播。

使用JQuery： onclick="event.stopPropagation()"

使用Prototype： onclick="Event.stop(event)"

- Loren

Answer 5

我不确定这是否有效，但可以尝试将链接元素的z-index值设置得比toggle_section div更大。

例如：

#toggle_section a { z-index: 10; }

- andyk