使内嵌div可点击嵌套的div [英] Make content div clickable with nested divs

问题描述

我有以下布局：

I have the following layout:

<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 click事件绑定到内容div，将其展开并制作隐藏的div（按钮和更多的内容）可见。我还有一个绑定到按钮的事件，可以在点击时激活一个模式。

I have jQuery click event tied to the content div that expands it and makes the hidden divs (the button and more content) visible. I also have an event tied to the button that activates a modal on click.

使用隐藏/显示方法可以毫无问题地展开/折叠div。问题是，点击该按钮后，即使模式被激活的div崩溃。

The expand/collapse of the div works without a problem using hide/show methods. The problem is after clicking on the button, the div collapses even though the modal is activated.

所以点击提交按钮后，该模式出现了，却在后台主要的div已经崩溃了。我试图保持主div打开，如果提交按钮被按下。

So after clicking on the Submit button, the modal pops up but in the background the main div is collapsed. I am trying to keep the main div open if the Submit button is pushed.

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

I tried setting the z-index fields on the button and the containing div to a value higher than what's on content div; this did not help.

我如何保持点击折叠div中的任何位置（其中按钮和额外内容不可见）的功能展开该div并单击在展开DIV按钮激活而不破坏主要的div模态对话框？

How could I keep the functionality of clicking anywhere in the collapsed div (where the button and extra content are not visible) expands that div and clicking on the button in the expanded div activate the modal dialog without collapsing the main div?

感谢您

推荐答案

你必须防止事件冒起来。当您单击该按钮时，点击 气泡注册DOM树并触发其他事件处理程序。

You have to prevent the event from bubbling up. When you click the button, the click event bubbles up the DOM tree and triggers other event handlers.

查看 event.stopPropagation（） ：

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

---

您也可以忽略所有不需要的点击源自 #content div：

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

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

This might be better if you want to click "anywhere" inside the div without hiding it.

这篇关于使内嵌div可点击嵌套的div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！