使内容的div点击嵌套的div

问题描述：

<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>

我绑到其扩展，使隐藏层（按钮和更多的内容）中可见内容的div jQuery的单击事件。我还有一个绑定到按钮的事件，可以在点击时激活模式。

使用隐藏/显示方法，div的展开/折叠工作没有问题。问题是点击按钮后，即使模式被激活，div也会崩溃。

所以在点击提交按钮后，模式会弹出，但在后台主div会折叠。如果提交按钮被按下，我试图保持主div打开。

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

我怎样才能保持在折叠的div（其中按钮和额外的内容不可见）的任何地方点击功能展开该div并单击展开的div中的按钮激活模式对话框而不折叠主div？

谢谢

答

你必须防止事件冒起来。当你点击按钮时，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中的“任意位置”而不隐藏它。

工作很好。并感谢您展示第二个选项。虽然它不适用于这个问题，但它解决了我正在处理的另一个问题。 – 2011-02-16 22:51:59

答

听起来好像按钮中的点击事件正在用于打开模式（就像你想的那样），但随后继续向上传播DOM树，直到它触发“content”div的onclick事件处理程序，关闭它。

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

希望这会有所帮助！

答

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

停止事件冒泡。

答

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

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

使内容的div点击嵌套的div

相关推荐