Question

我有以下布局：

<div id="content">
  <div id="img"><img src=""></div>
  <div id="main">Some content</div>
  <div id="btn" class="hidden"><button>Submit</div>
  <div class="hidden">Some other stuff</div>
</div>

我有jQuery点击事件绑定到内容div，它扩展了它并使隐藏的div（按钮和更多内容）可见。我还有一个事件与按钮相关联，可以在点击时激活模态。

div的展开/折叠使用hide / show方法没有问题。问题是在点击按钮后，即使模态被激活，div也会崩溃。

因此，在单击“提交”按钮后，弹出模式，但在后台主要div被折叠。如果按下“提交”按钮，我会尝试保持主div打开。

我尝试将按钮上的z-index字段和包含div的值设置为高于内容div上的值;这没有帮助。

如何保持折叠div中任何位置的单击功能（按钮和额外内容不可见）扩展该div并单击展开div中的按钮激活模态对话框而不折叠主div？< / p>

谢谢

Answer 1

你必须防止事件冒泡。单击按钮时，click事件bubbles up the DOM tree会触发其他事件处理程序。

查看event.stopPropagation()：

$('button').click(function(event) {
    event.stopPropagation()
    // modal stuff
});

您还可以忽略所有不是来自#content div的点击：

$('#content').click(function(event) {
    if(event.target == this) {
       // hide/colapse
    }
});

如果您想在div中单击“任意位置”而不隐藏它，这可能会更好。

Answer 2

听起来，按钮中的click事件用于打开模态（如您所愿），但随后继续向上传播DOM树，直到它触发“内容”的onclick事件处理程序div，关闭它。

您应该可以通过从按钮的onclick函数返回false或在同一函数中的任何位置调用event.stopPropagation()来停止此操作。

希望这有帮助！

Answer 3

$("#btn").click(function(event){
  event.stopPropagation();
  // do something
});

停止事件冒泡。

Answer 4

尝试将e.stopPropagation（）放在按钮点击事件上。像这样：

$("#btn").click(function(e) {
    e.stopPropagation();
    // some other code
});

使用嵌套的div使内容div可单击

4 个答案: