包装 div 上的 Javascript 模糊事件

Question

I have inner input field and a wrapper div element. I have added contenteditable attribute to the div element in order to be able to set focus on it. I would like to catch the onblur event of the div .

Now, If I'm in focus on the input field and click with the mouse on different place in the screen the blur event of the input field is called of course but not the blur event on the div. Of course this makes sense - this is how the browser works.

But anyway, I was wondering if and how it is possible to achieve that.

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

Answer 1

For blur event to fire on an element, the element needs to receive focus first. But elements do not receive focus by default.

You can add tabindex="0" or contentEditable to your div so it will receive focus.

See it in action: http://jsfiddle.net/t25rm/

Answered here: Div - onblur function

Answer 2

Issue solved when I changed the blur event to focusout

From MDN web docs: The focusout event is fired when an element is about to lose focus. The main difference between this event and blur is that the latter doesn't bubble.

This is exactly what I needed.