内部div受外部div的影响

Question

问题：
单击内部div会触发外部div的onClick事件。在这种情况下，它会切换外部<div>，内部<div>和<p>元素的可见性。

我尝试了什么：
在内部div上设置 z-index 高于外部div。没效果。

HTML：

<div id='messageForm' onClick=toggleMessageForm() >
  <div class="innerBox">

    <p>Hi!</p>

  </div>
</div>

JS：

function toggleMessageForm(){
  $('#messageForm').toggle();
}

注意：我使用toggle（）而不是show（）的原因是因为我在最初通过原始网页中的按钮显示表单时使用相同的功能。

Answer 1

完全删除onClick属性，而是用jQuery挂钩处理程序：

$("#messageForm").click(function(evt) {
    evt.stopPropagation();
    toggleMessageForm();
});

将其放在HTML中低于script的{​​{1}}元素中（或将其包装在div处理程序中）。

evt.stopPropagation取消点击事件的冒泡（停止传播），因此它无法到达父div。

如果您确实想要保留ready属性，则可以改为：

onClick

...然后在<div id='messageForm' onClick="toggleMessageForm(event);"> ：

toggleMessageForm

...但是，由于您已经在使用jQuery，这将是不寻常的。

Answer 2

使用 stopPropagation （）;

function toggleMessageForm(e){
 e.stopPropagation();
  $('#messageForm').toggle();
}

e.stopPropagation（）;

  

阻止事件冒泡DOM树，防止任何事件   家长处理人员被告知该事件。

Answer 3

如果你在外部和内部div上有一个或多个jQuery单击函数，并且你只想执行其中一个（例如外部div），请使用jQuery的 stopImmediatePropagation 函数：

$("#messageForm").click(function(e) {
    e.preventDefault();
    e.stopImmediatePropagation();
    $('#messageForm').toggle();
});