Div'我们互相点击

Div's clicking through each other?

本文关键字：我们 Div      更新时间：2023-09-26

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

不过，当点击时，我可以将其设置为展开并显示更多信息，同时显示右上角的关闭按钮。。。

现在，当我点击关闭按钮时，关闭函数会执行，但div的onclick也会打开，所以最终结果是，嗯。。。什么都没发生。。。

哈哈。。。

小提琴的例子也不起作用，我快智穷了。。。

http://jsfiddle.net/VeyeY/5/

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

另一种解决方案是在事件本身上调用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
}

更新您可以：

  1. 在#inner上放置一个margin-top，这样用户就不会同时单击这两个按钮（或者从#outer的顶部边缘偏移一点）（更新：被拒绝，CSS解决方案）

  2. 或者，为每个div激发不同的函数，如innerToggle()和outerToggle()。这样，你甚至可以从另一个呼叫一个（更新：此处有问题，导致解决方案2a。）

    2a。另一种方法是只为#outer触发事件？如果单击#inner，事件将弹出，#outer将触发切换，如图所示

  3. 或者，根据需要禁用其中一个或另一个的单击事件（更新：请参阅@DanneMarne的解决方案。）

  4. 或者，在每个对象上设置一个自定义属性，例如$('outer').toggled = false，它将记录每个对象的当前状态（更新：没关系，没有多大帮助）

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

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

相关文章：