8

嗨，我有一个 DIV 部分，最初只有其标题可见。我想要实现的是，当访问者单击 div 区域上的任意位置时，toggle_section会toggle_stuff在可见/隐藏之间切换。

<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 事件。

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

4

5 回答 5

7

最简单的解决方案是在 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中找到了解此行为背后的实际原因以及事件捕获和事件冒泡之间差异的一个很好的指南。

于 2009-01-04T19:01:29.247 回答
4

在脚本中：

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 覆盖中得到了这个- 必须搜索源并且很高兴发现它是这个站点。:)

于 2012-10-24T16:37:22.630 回答
2

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

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

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

我想这仅适用于A标签，但不适用于其他任何可点击的东西。

于 2009-01-04T19:40:12.167 回答
0

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

就像是 ：

#toggle_section a { z-index: 10; }
于 2009-01-04T18:38:58.733 回答
0

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

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

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

于 2010-12-13T11:33:42.513 回答