Question

我有一个包含div，它本身就是一个按钮......

点击后，我设置了扩展并显示更多信息，同时在右上方显示一个关闭按钮...

现在，当我点击关闭按钮时，关闭功能会执行，而div的onclick也会打开，所以最终的结果是......好吧......什么都没发生......

...洛尔

这个小提琴的例子也不起作用，我的智慧即将结束......

Answer 1

您可以从onclick返回false以关闭div。这将确保不传播click事件。

另一个解决方案是在事件本身上调用preventDefault()和stopPropagation()。这也将确保事件不会继续。

编辑：

在发生的所有事件中（onclick，onchange，onmouseover等），总会有一个事件变量，如果你愿意，你可以忽略它，或者从中提取信息。在您的示例中，我认为使用事件变量的最简单方法是执行以下操作：

<div id="inner" onclick="toggle(false); event.preventDefault(); event.stopPropagation();">

现在看起来有点难看，你真的不想在html标记中处理这个问题，所以另一个选择就是将事件变量传递给你的函数：

<div id="inner" onclick="toggle(event, false)">

然后在javascript中：

function toggle(event, x){
    // Do your thing

    event.preventDefault();
    event.stopPropagation();
}

您可以使用事件变量执行许多操作。例如，您可以检查发起事件的节点，而不是将true或false传递给您的函数：

if(event.originalTarget.id == "inner"){
    // Inner was clicked
}else if(event.originalTarget.id == "outer"){
    // Outer was clicked
}

Answer 2

<强>已更新你可以：

在margin-top上放置#inner，这样用户就不会同时点击两者（或者从#outer的上边缘偏移某种类型）。 （更新：拒绝，CSS解决方案）
或者，为每个div启用不同的功能，例如innerToggle()和outerToggle()。这样你甚至可以从另一个呼叫一个。 （更新：Fiddled here，导致解决方案2a。）

2a上。另一种方法是只触发#outer的事件？如果点击了#inner，则事件会冒出来，#outer会触发切换，如here所示。
或者，根据需要禁用其中一个或另一个的点击事件。 （更新：请参阅@ DanneMarne的解决方案。）
或者，在每个对象上设置一个自定义属性，例如$('outer').toggled = false，它将记录每个对象的当前状态。 （更新：没关系，不是很有帮助）。

更新：所以经过一些测试后，我会选择2a。

Answer 3

您可以在显示后禁用DIV点击功能。您可以在按下关闭按钮时重新启用该单击功能。