受外部 div 的 onclick 影响的内部 div答案

【问题标题】：Inner div affected by outer div's onclick受外部 div 的 onclick 影响的内部 div
【发布时间】：2014-07-11 20:42:24
【问题描述】：

问题：
点击内部 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() 的原因是因为我在最初从原始网页中的按钮显示表单时使用了相同的功能。

【问题讨论】：

为什么需要使用内联事件处理程序？当你使用 jQuery 时。

标签： javascript jquery html

【解决方案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，这将是不寻常的。

【讨论】：

【解决方案2】：

使用stopPropagation();

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

e.stopPropagation();

防止事件在 DOM 树中冒泡，防止任何父处理程序不会收到事件通知。

【讨论】：

【解决方案3】：

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

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

【讨论】：