javascript - 受外部 div 的 onclick 影响的内部 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 中低于 div 的 script 元素中(或将其包装在 ready 处理程序中)。

evt.stopPropagation取消点击事件的冒泡(停止传播)，因此它不会到达父 div。

如果您真的非常想保留 onClick 属性，您可以这样做:

<div id='messageForm' onClick="toggleMessageForm(event);">

...然后在 toggleMessageForm 中:

function toggleMessageForm(evt){
  if (evt.stopPropagation) {
      evt.stopPropagation();
  }
  else {
      evt.cancelBubble = true;
  }
  $('#messageForm').toggle();
}

...但是因为您已经在使用 jQuery，所以这是不寻常的。