javascript - Blur event triggered when child gets focus -

i need perform action when , item looses focus

basically have this

<div tabindex="1">     <h1>title 1</h1> </div>  <div tabindex="2">     <h1>title 2</h1>      <textarea></textarea> </div> 

js:

$('div').blur((e) => { console.log('blur');}); 

demo

now, when switch between divs works charm, when second div has focus, , click child-textarea blur event triggered. not want, because we're still inside same div. how can fix such blur event triggered when click outside div ?

a element has been focus last element focused trigger event 'blur'. may have design hack it...something like:

$('div').blur((e) => {     settimeout(function() {         if(!$('textarea').is(':focus')){             console.log('blur');         }     }, 100); }); 

settimeout important because blur event being trigged in first focus event.