Vermeiden Element Unschärfe-Handler, wenn das Fenster Unschärfe aufgerufen (Browser den Fokus verliert)

Question

auslegen auf die Frage:

ich ein Element haben, die beim Anklicken ein Unterelement empfängt. Dieses Unterelement erhält einen Unschärfe-Handler.

Was ich möchte ist, dass der Handler nicht aufgerufen wird, wenn der Browser den Fokus verliert (auf Fenster Unschärfe).

Auf dem Weg zu diesem Ziel, das ich mehrere Stifte versucht haben, dies ist meine aktuelle Anstrengung:

function clicked() { 
    // generate a child element 
    ... 
    field = $(this).children(":first"); 
    $(window).blur(function() { 
     field.unbind("blur"); 
    }); 
    $(window).focus(function() { 
     field.focus(); 
     field.blur(function() { 
      save(this); 
     }); 
    }); 
    field.blur(function() { 
     save(this); 
    }); 
} 

Dies funktioniert nicht. Es scheint, dass wenn der Browser den Fokus verliert, das Feld zuerst den Fokus verliert.

Answer 1

Nette Frage!

Dies ist möglich und ziemlich einfach.

field.blur(function() { 
    if(document.activeElement !== this) { 
     // this is a blur that isn't a window blur 
    } 
}); 

JSFiddle

Oder in Vanille JS:

field.addEventListener('blur', function() { 
    if(document.activeElement !== this) { 
     // this is a blur that isn't a window blur 
    } 
}); 

Edit: Obwohl Ihre Antwort beschäftigt sich mit dem Browser Fokus zu verlieren, wissen, dass Firefox unusal Verhalten hat bei der Rückkehr (Bug?) zu konzentrieren. Wenn Sie eine Eingabe fokussiert haben und das Fenster dann nicht fokussieren, wird die Unschärfe des Elements ausgelöst (worum ging es in der Frage). Wenn Sie zu etwas anderem als der Eingabe zurückkehren, wird das Blur-Ereignis ausgelöst Sekunde Zeit.

Answer 2

Eine leicht schmutzige Möglichkeit, dies zu tun, könnte eine setTimeout() vor Maßnahmen ergreifen.

var windowFocus; 

$(window).focus(function() { 
    windowFocus = true; 
}); 

$(window).blur(function() { 
    windowFocus = false; 
}); 

function clicked() { 
    // generate a child element 
    ... 

    field = $(this).children(":first"); 

    field.blur(function() { 
     setTimeout(function() { 
      if (windowFocus) { 
       save(this); 
      } 
     }, 50); 
    }); 
}