Javascript 包装器上的模糊事件 div

Javascript blur event on wrapper div

我有内部输入字段和包装器 div 元素。 我已将 contenteditable 属性添加到 div 元素,以便能够将焦点设置在它上面。 我想捕捉 div.

onblur 事件

现在,如果我将焦点放在输入字段上并在屏幕上的不同位置单击鼠标 输入字段的模糊事件当然会被调用,但 div 上的模糊事件不会被调用。 当然这是有道理的 - 这就是浏览器的工作方式。

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

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

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

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

查看实际效果:http://jsfiddle.net/t25rm/

在这里回答: Div - onblur function

当我将模糊事件更改为 focusout

时问题已解决

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

这正是我需要的。