How to detect if textbox is under a div tag?

Question

Everything is working if i click inside the div tag and then clicking right away outside the div tag, the onblur event is functioning well but when i try to click first the textbox and then clicking the outside div, the onblur event does not trigger right away. Can i just create a cascaded div tag and turn it one into a contenteditable one or is there any other options? Here's my code

<div tabindex="0" onblur="alert('This one has tabindex');">
   <input type="text"> This will receive focus
</div>

Link http://jsfiddle.net/3kw9aqsg/

Answer 1

It should work if you simply replace onblur with onfocusout . They are similar, but only the second one bubbles.

Answer 2

Attach a listener to the parent div and it should work

<div tabindex="0" id="myDiv">

document.getElementById('myDiv').addEventListener('blur', listener, true)
function listener(){ alert('from parent');}