包装器 div 上的 Javascript 模糊事件答案

【问题标题】：Javascript blur event on wrapper div包装器 div 上的 Javascript 模糊事件
【发布时间】：2018-04-24 12:44:34
【问题描述】：

我有一个内部输入字段和一个包装 div 元素。我在 div 元素中添加了contenteditable 属性，以便能够将焦点放在它上面。我想捕捉 div 的 onblur 事件。

现在，如果我专注于输入字段并用鼠标单击屏幕的不同位置当然会调用输入字段的模糊事件，但不会调用 div 上的模糊事件。当然这是有道理的——这就是浏览器的工作原理。

但无论如何，我想知道是否以及如何实现这一目标。

  <div id="wrapperDiv" contenteditable class="wrapperDivClass">
      <input id="innerId">
  </div>

【问题讨论】：

【解决方案1】：

要在元素上触发模糊事件，该元素需要首先获得焦点。但默认情况下元素不接收焦点。

您可以将 tabindex="0" 或 contentEditable 添加到您的 div 中，以便获得焦点。

【讨论】：

谢谢，但这不是我在这里要问的......我可以捕捉到 div 上的模糊 - 但它对于我的用例来说还不够好......我需要能够捕捉模糊div 的事件，无论鼠标在离开 div 后在屏幕上单击的位置

【解决方案2】：

当我将模糊事件更改为 focusout

时问题已解决

来自 MDN 网络文档： 当元素即将失去焦点时会触发 focusout 事件。此事件与 blur 的主要区别在于后者不会冒泡。

这正是我所需要的。

【讨论】：