Evitare gestore elemento mosso quando la finestra sfocatura invocato (browser non è più attivo)

Question

di esporre sulla questione:

Ho un elemento che quando si fa clic riceve un sotto-elemento. A quell'elemento secondario viene assegnato un gestore di sfocatura.

Quello che vorrei è che il gestore non venga richiamato quando il browser perde lo stato attivo (sfocatura della finestra).

Verso questo obiettivo ho tentato diverse virate, essendo questo il mio attuale impegno:

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); 
    }); 
} 

Questo non funziona. Ciò che sembra accadere è che quando il browser perde lo stato attivo, il campo sta perdendo la priorità.

Answer 1

Bella domanda!

Questo è possibile e abbastanza semplice.

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

JSFiddle

O in JS vaniglia:

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

Edit: Anche se i vostri offerte di risposta con il browser perdere messa a fuoco, sapere che Firefox ha un comportamento insolito per la restituzione (bug?) focalizzare. Se hai un input focalizzato, e quindi metti a fuoco la finestra, viene attivata la sfocatura dell'elemento (che è la domanda). Se si ritorna a qualcosa di diverso dall'input, l'evento di sfocatura viene attivato a secondo tempo.

Answer 2

Un modo leggermente sporco per fare ciò potrebbe essere quello di utilizzare un setTimeout() prima di agire.

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); 
    }); 
}