Blur-Ereignis ausgelöst wird, wenn Kind den Fokus erhält

Question

Ich brauche eine Aktion auszuführen, wenn und Element den Fokus verliert

Im Grunde habe ich so etwas wie dieses

<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

Jetzt, wenn Sie zwischen div s wechseln, funktioniert es wie ein Charme, aber wenn der zweite div Fokus hat, und Sie auf die Child-Textarea klicken, wird ein blur Ereignis ausgelöst. Das ist nicht das, was ich will, weil wir immer noch in demselben Div sind. Wie kann ich das beheben, so dass nur ein Unschärfe-Ereignis ausgelöst wird, wenn der Klick außerhalb des div ist?

Answer 1

Ein Element wurde fokussiert, dann wird das letzte fokussierte Element das Ereignis 'Unschärfe' auslösen. Sie können dafür einen Hack zu entwerfen haben ... so etwas wie:

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

SetTimeout wichtig ist, weil Unschärfe Ereignis in dem ersten dann konzentrieren Ereignisse trigged wird.